Skip to content

Commit be98080

Browse files
niieaniniieani
committed
docs: improvements to storybook
1 parent 3cd6a2a commit be98080

File tree

5 files changed

+63
-85
lines changed

5 files changed

+63
-85
lines changed

‎src/stories/mockComponentsv3/App.tsx

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React, { useState } from 'react'
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
/* eslint-disable no-magic-numbers */
3+
import React, { useEffect, useState } from 'react'
24
import { Button } from '@zendeskgarden/react-buttons'
35
import {
46
Body,
@@ -23,17 +25,62 @@ import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arr
2325
import { ReactComponent as ProductIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg'
2426
import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/26/home-fill.svg'
2527
import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/zendesk.svg'
28+
import { observePerformanceWithTraceManager } from '../../v3/observePerformanceWithTraceManager'
2629
// CYN: NEED UPDATE
2730
import { mockTickets } from './mockTickets'
2831
import { TicketList } from './TicketList'
2932
import { TicketView } from './TicketView'
30-
import type { TicketIdScope } from './traceManager'
3133
import { traceManager } from './traceManager'
32-
import { observePerformanceWithTraceManager } from '../../v3/observePerformanceWithTraceManager'
34+
35+
const tracer = traceManager.createTracer({
36+
name: `ticket-activation`,
37+
type: 'operation',
38+
// requiredScopeKeys: TicketIdScope,
39+
requiredToEnd: [
40+
{
41+
name: 'TicketView',
42+
scopeKeys: ['ticketId'],
43+
type: 'component-render',
44+
isIdle: true,
45+
// isIdle: true,
46+
// status: 'ok',
47+
// occurrence: 2,
48+
},
49+
],
50+
requiredScopeKeys: ['ticketId'],
51+
// debounceDuration: 1_000,
52+
timeoutDuration: 45_000,
53+
debounceOn: [
54+
{
55+
name: 'TicketView',
56+
scopeKeys: ['ticketId'],
57+
},
58+
],
59+
interruptOn: [
60+
{
61+
name: 'TicketView',
62+
scopeKeys: ['ticketId'],
63+
type: 'component-unmount',
64+
},
65+
],
66+
})
67+
68+
// simulate an event every 2 seconds
69+
const simulateEventPeriodically = (ticketId: number | null) => {
70+
const interval = setInterval(() => {
71+
performance.mark(`ticket-${ticketId}-event`)
72+
}, 2_000)
73+
74+
return () => void clearInterval(interval)
75+
}
3376

3477
export const App: React.FC = () => {
3578
const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
3679
const [selectedTicketIds, setSelectedTicketIds] = useState<number[]>([])
80+
useEffect(
81+
() => simulateEventPeriodically(selectedTicketId),
82+
[selectedTicketId],
83+
)
3784

3885
observePerformanceWithTraceManager(traceManager, [
3986
'element',
@@ -73,52 +120,7 @@ export const App: React.FC = () => {
73120
// waitUntilInteractive: true,
74121
// interruptSelf: true,
75122
// })
76-
const tracer = traceManager.createTracer({
77-
name: `ticket-activation`,
78-
type: 'operation',
79-
// requiredScopeKeys: TicketIdScope,
80-
requiredToEnd: [
81-
{
82-
name: 'TicketView',
83-
scope: {
84-
ticketId: id,
85-
},
86-
type: 'component-unmount',
87-
// isIdle: true,
88-
status: 'ok',
89-
// occurrence: 2,
90-
},
91-
],
92-
requiredScopeKeys: ['ticketId'],
93-
// debounceDuration: 1_000,
94-
timeoutDuration: 45_000,
95-
// debounceOn: [
96-
// {
97-
// match: { attributes: { ticketId: id } },
98-
99-
// },
100-
// ],
101-
interruptOn: [
102-
{
103-
name: 'TicketView',
104-
scope: {
105-
ticketId: id,
106-
},
107-
type: 'component-unmount',
108-
},
109-
],
110-
})
111-
tracer.start({
112-
scope: {
113-
ticketId: id,
114-
},
115-
attributes: {
116-
ticketId: id,
117-
},
118-
startTime: {
119-
now: performance.now(),
120-
},
121-
})
123+
tracer.start({ scope: { ticketId: id } })
122124

123125
setSelectedTicketId(id)
124126
}

‎src/stories/mockComponentsv3/Ticket.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import React from 'react'
23
import { Cell, Row } from '@zendeskgarden/react-tables'
34

‎src/stories/mockComponentsv3/TicketList.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import React from 'react'
23
import {
34
Body,
@@ -7,9 +8,9 @@ import {
78
HeaderRow,
89
Table,
910
} from '@zendeskgarden/react-tables'
10-
import { Ticket } from './Ticket'
11-
import type { Ticket as TicketType } from './mockTickets'
1211
import { XL } from '@zendeskgarden/react-typography'
12+
import type { Ticket as TicketType } from './mockTickets'
13+
import { Ticket } from './Ticket'
1314

1415
interface TicketListProps {
1516
tickets: TicketType[]

‎src/stories/mockComponentsv3/TicketView.tsx

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
12
import React, { useEffect } from 'react'
23
import styled from 'styled-components'
34
import { Timeline } from '@zendeskgarden/react-accordions'
@@ -13,10 +14,9 @@ import {
1314
useCaptureRenderBeaconTask,
1415
useRenderProcessTrace,
1516
} from '../../v2/hooks'
16-
import { mockTickets } from './mockTickets'
17-
import { traceManager } from './traceManager'
18-
import { generateUseBeacon } from '../../v3/hooks'
1917
import { observePerformanceWithTraceManager } from '../../v3/observePerformanceWithTraceManager'
18+
import { mockTickets } from './mockTickets'
19+
import { useBeacon } from './traceManager'
2020

2121
export const StyledSpan = styled(Span).attrs({ isBold: true, hue: 'blue' })`
2222
margin-left: ${DEFAULT_THEME.space.base * 2}px;
@@ -39,40 +39,11 @@ export const TicketView: React.FC<TicketViewProps> = ({
3939
cached = false,
4040
onLoaded,
4141
}) => {
42-
// useRenderProcessTrace(
43-
// {
44-
// operationManager: traceManager,
45-
// operationName: 'TicketView',
46-
// onEnd: (trace) => {
47-
// console.log('TicketView trace', trace, 'ticketId', ticketId)
48-
// },
49-
// track: [
50-
// { match: { attributes: { ticketId } } },
51-
// {
52-
// //debounce on any event that has the same ticket id
53-
// match: { attributes: { ticketId, visibleState: 'complete' } }, //required to end the operation, ticket fully loaded!
54-
// requiredToEnd: true,
55-
// },
56-
// ],
57-
// },
58-
// [ticketId],
59-
// )
60-
61-
// useCaptureRenderBeaconTask({
62-
// componentName: 'TicketView',
63-
// attributes: { ticketId, loading: !cached },
64-
// visibleState: cached ? VISIBLE_STATE.COMPLETE : VISIBLE_STATE.LOADING,
65-
// operationManager: traceManager,
66-
// })
67-
68-
// observePerformanceWithTraceManager(traceManager, [])
69-
const tracingBeacon = generateUseBeacon(traceManager)
70-
tracingBeacon({
42+
useBeacon({
7143
name: 'TicketView',
7244
scope: { ticketId },
73-
renderedOutput: 'content',
45+
renderedOutput: cached ? 'content' : 'loading',
7446
isIdle: false,
75-
attributes: { ticketId },
7647
})
7748

7849
const ticket = mockTickets.find((ticket) => ticket.id === ticketId)

‎src/stories/mockComponentsv3/traceManager.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { generateUseBeacon } from '../../v3/hooks'
12
import { TraceManager } from '../../v3/traceManager'
23

34
export interface TicketIdScope {
@@ -11,3 +12,5 @@ export const traceManager = new TraceManager<TicketIdScope>({
1112
},
1213
generateId: () => Math.random().toString(36).slice(2),
1314
})
15+
16+
export const useBeacon = generateUseBeacon(traceManager)

0 commit comments

Comments
 (0)