chore: Add props telemerty reporting for code-view component (#21)

Author: just-boris

src/code-view/index.tsx

@@ -8,7 +8,9 @@ import { InternalCodeView } from "./internal";
 export type { CodeViewProps };
 
 export default function CodeView(props: CodeViewProps) {
-  const baseComponentProps = useBaseComponent("CodeView");
+  const baseComponentProps = useBaseComponent("CodeView", {
+    props: { lineNumbers: props.lineNumbers },
+  });
   return <InternalCodeView {...props} {...baseComponentProps} />;
 }
 

src/internal/base-component/use-base-component.ts

@@ -1,7 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { initAwsUiVersions, useComponentMetadata } from "@cloudscape-design/component-toolkit/internal";
+import {
+  ComponentConfiguration,
+  initAwsUiVersions,
+  useComponentMetadata,
+} from "@cloudscape-design/component-toolkit/internal";
 import { MutableRefObject } from "react";
 import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
 import { useTelemetry } from "./use-telemetry";
@@ -17,8 +21,8 @@ export interface InternalBaseComponentProps {
  * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
  * root DOM node and emits the telemetry for this component.
  */
-export default function useBaseComponent<T = any>(componentName: string) {
-  useTelemetry(componentName);
+export default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {
+  useTelemetry(componentName, config);
   const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);
   return { __internalRootRef: elementRef };
 }

src/internal/base-component/use-telemetry.ts

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useComponentMetrics } from "@cloudscape-design/component-toolkit/internal";
+import { ComponentConfiguration, useComponentMetrics } from "@cloudscape-design/component-toolkit/internal";
 import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from "../environment";
 import { useVisualRefresh } from "./use-visual-refresh";
 
-export function useTelemetry(componentName: string) {
+export function useTelemetry(componentName: string, config?: ComponentConfiguration) {
   const theme = useVisualRefresh() ? "vr" : THEME;
-  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme });
+  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config);
 }