feat(react-bindings): added useTelemetry and improved returned value of other hooks (#2257)

* -updates

* -updated changelog

* -removed animation from useStyles

* -updated tests

Author: mnajdova

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236))
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
+- Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))

docs/src/prototypes/customToolbar/index.tsx

@@ -1,13 +1,14 @@
 import * as _ from 'lodash'
 import * as React from 'react'
 import { KnobsSnippet } from '@fluentui/code-sandbox'
+import { Telemetry } from '@fluentui/react-bindings'
 import {
   KnobProvider,
   useBooleanKnob,
   useSelectKnob,
   KnobInspector,
 } from '@fluentui/docs-components'
-import { Provider, Flex, themes, mergeThemes, Telemetry } from '@fluentui/react'
+import { Provider, Flex, themes, mergeThemes } from '@fluentui/react'
 
 import { darkThemeOverrides } from './darkThemeOverrides'
 import { highContrastThemeOverrides } from './highContrastThemeOverrides'

packages/react-bindings/README.md

@@ -116,7 +116,7 @@ const createInputManager: ManagerFactory<InputState, InputActions> = config =>
   })
 
 const Input: React.FC<InputProps> = props => {
-  const [state, actions] = useStateManager(createInputManager, {
+  const { state, actions } = useStateManager(createInputManager, {
     mapPropsToInitialState: () => ({ value: props.defaultValue }),
     mapPropsToState: () => ({ value: props.value }),
   })
@@ -136,8 +136,8 @@ const Input: React.FC<InputProps> = props => {
 ### Reference
 
 ```tsx
-const [state, actions] = useStateManager(createInputManager)
-const [state, actions] = useStateManager(
+const { state, actions } = useStateManager(createInputManager)
+const { state, actions } = useStateManager(
   managerFactory: ManagerFactory<State, Actions>,
   options: UseStateManagerOptions<Props>,
 )
@@ -164,7 +164,7 @@ type TextComponentProps = {
 const Text: React.FunctionComponent<TextComponentProps> = props => {
   const { className, children, color } = props
 
-  const [classes] = useStyles('Text', {
+  const { classes } = useStyles('Text', {
     className: 'ui-text',
     mapPropsToStyles: () => ({ color }),
   })
@@ -176,7 +176,7 @@ const Text: React.FunctionComponent<TextComponentProps> = props => {
 ### Reference
 
 ```tsx
-const [classes] = useStyles(
+const { classes } = useStyles(
   displayName: string,
   options: UseStylesOptions<Props>,
 )

packages/react-bindings/src/hooks/useStateManager.ts

@@ -7,6 +7,11 @@ type UseStateManagerOptions<State> = {
   sideEffects?: SideEffect<State>[]
 }
 
+type UseStateManagerResult<State, Actions> = {
+  state: Readonly<State>
+  actions: Readonly<Actions>
+}
+
 const getDefinedProps = <Props extends Record<string, any>>(props: Props): Partial<Props> => {
   const definedProps: Partial<Props> = {}
 
@@ -25,7 +30,7 @@ const useStateManager = <
 >(
   managerFactory: ManagerFactory<State, Actions>,
   options: UseStateManagerOptions<State> = {},
-): [Readonly<State>, Readonly<Actions>] => {
+): UseStateManagerResult<State, Actions> => {
   const {
     mapPropsToInitialState = () => ({} as Partial<State>),
     mapPropsToState = () => ({} as Partial<State>),
@@ -58,11 +63,14 @@ const useStateManager = <
   // https://github.com/facebook/react/issues/11527#issuecomment-360199710
 
   if (process.env.NODE_ENV === 'production') {
-    return [latestManager.current.state, latestManager.current.actions]
+    return { state: latestManager.current.state, actions: latestManager.current.actions }
   }
 
   // Object.freeze() is used only in dev-mode to avoid usage mistakes
-  return [Object.freeze(latestManager.current.state), Object.freeze(latestManager.current.actions)]
+  return {
+    state: Object.freeze(latestManager.current.state),
+    actions: Object.freeze(latestManager.current.actions),
+  }
 }
 
 export default useStateManager

packages/react-bindings/src/hooks/useStyles.ts

@@ -25,6 +25,11 @@ type UseStylesOptions<StyleProps extends PrimitiveProps> = {
   rtl?: boolean
 }
 
+type UseStylesResult = {
+  classes: ComponentSlotClasses
+  styles: ComponentSlotStylesPrepared
+}
+
 type InlineStyleProps<StyleProps> = {
   /** Additional CSS class name(s) to apply.  */
   className?: string
@@ -48,7 +53,7 @@ const defaultContext: StylesContextValue<{ renderRule: RendererRenderRule }> = {
 const useStyles = <StyleProps extends PrimitiveProps>(
   displayName: string,
   options: UseStylesOptions<StyleProps>,
-): [ComponentSlotClasses, ComponentSlotStylesPrepared] => {
+): UseStylesResult => {
   const context: StylesContextValue<{ renderRule: RendererRenderRule }> =
     React.useContext(ThemeContext) || defaultContext
 
@@ -79,7 +84,7 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
   })
 
-  return [classes, resolvedStyles]
+  return { classes, styles: resolvedStyles }
 }
 
 export default useStyles

packages/react-bindings/src/index.ts

@@ -18,5 +18,8 @@ export { default as unstable_createAnimationStyles } from './styles/createAnimat
 export { default as unstable_getStyles } from './styles/getStyles'
 export * from './styles/types'
 
+export { default as useTelemetry } from './telemetry/useTelemetry'
+export * from './telemetry/types'
+
 export { default as getElementType } from './utils/getElementType'
 export { default as getUnhandledProps } from './utils/getUnhandledProps'

packages/react/src/utils/Telemetry.ts renamed to packages/react-bindings/src/telemetry/types.ts

@@ -5,7 +5,12 @@ type ComponentPerfStats = {
   msMax: number
 }
 
-export default class Telemetry {
+export type UseTelemetryResult = {
+  setStart: () => void
+  setEnd: () => void
+}
+
+export class Telemetry {
   performance: Record<string, ComponentPerfStats>
   enabled: boolean
 

packages/react-bindings/src/telemetry/useTelemetry.ts

@@ -0,0 +1,43 @@
+import { Telemetry, UseTelemetryResult } from './types'
+
+const useTelemetry = (
+  displayName: string,
+  telemetry: Telemetry | undefined,
+): UseTelemetryResult => {
+  let start: number = -1
+  let end: number = -1
+
+  const setStart = () => {
+    start = telemetry && telemetry.enabled ? performance.now() : -1
+  }
+
+  const setEnd = () => {
+    if (telemetry && telemetry.enabled && start !== -1) {
+      end = performance.now()
+      const duration = end - start
+      if (telemetry.performance[displayName]) {
+        telemetry.performance[displayName].count++
+        telemetry.performance[displayName].msTotal += duration
+        telemetry.performance[displayName].msMin = Math.min(
+          duration,
+          telemetry.performance[displayName].msMin,
+        )
+        telemetry.performance[displayName].msMax = Math.max(
+          duration,
+          telemetry.performance[displayName].msMax,
+        )
+      } else {
+        telemetry.performance[displayName] = {
+          count: 1,
+          msTotal: duration,
+          msMin: duration,
+          msMax: duration,
+        }
+      }
+    }
+  }
+
+  return { setStart, setEnd }
+}
+
+export default useTelemetry

packages/react-bindings/test/hooks/useDispatchEffect-test.tsx

@@ -37,7 +37,7 @@ const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
       }
     },
   )
-  const [state, actions] = useStateManager(createTestManager, {
+  const { state, actions } = useStateManager(createTestManager, {
     mapPropsToInitialState: () => ({ value: props.defaultValue }),
     mapPropsToState: () => ({ value: props.value }),
     sideEffects: [dispatchEffect],

packages/react-bindings/test/hooks/useStateManager-test.tsx

@@ -33,7 +33,7 @@ type TestComponentProps = Partial<TestState> & {
 }
 
 const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
-  const [state, actions] = useStateManager(createTestManager, {
+  const { state, actions } = useStateManager(createTestManager, {
     mapPropsToInitialState: () => ({
       open: props.defaultOpen,
       value: props.defaultValue,