Track import/export actions

Author: psd-coder

packages/core/src/components/ExportImportMenu/items/ExportConfigsList.tsx

@@ -2,12 +2,19 @@ import { MenuItemButton } from "@core/components/Menu/MenuItemButton";
 import { downloadConfigTarget, ExportTargets } from "@core/stores/config";
 import { objectEntries } from "@core/utils/object/objectEntries";
 
-export function ExportConfigsList() {
+export type ExportConfigsListProps = {
+  onClick?: (exportTarget: string) => void;
+};
+
+export function ExportConfigsList({ onClick }: ExportConfigsListProps) {
   return objectEntries(ExportTargets).map(([exportTarget, config]) => (
     <MenuItemButton
       key={exportTarget}
       value={exportTarget}
-      onClick={() => downloadConfigTarget(exportTarget)}
+      onClick={() => {
+        downloadConfigTarget(exportTarget);
+        onClick?.(exportTarget);
+      }}
     >
       {config.name}
     </MenuItemButton>

packages/core/src/components/ExportImportMenu/items/PasteWebAppUrl.tsx

@@ -19,9 +19,10 @@ import styles from "./PasteWebAppUrl.module.css";
 
 export type ActionPasteUrlProps = Omit<ListItemProps<"button">, "as"> & {
   value: string;
+  onPaste?: (data: string) => void;
 };
 
-export function PasteWebAppUrl({ value, ...restProps }: ActionPasteUrlProps) {
+export function PasteWebAppUrl({ value, onPaste, ...restProps }: ActionPasteUrlProps) {
   const api = useMenuApi();
   const inputRef = useRef<HTMLInputElement>(null);
   const [isPasting, setIsPasting] = useState(false);
@@ -47,6 +48,7 @@ export function PasteWebAppUrl({ value, ...restProps }: ActionPasteUrlProps) {
       setHasError(!updated);
       if (updated) {
         api.setOpen(false);
+        onPaste?.(pastedData);
       }
     },
     [isPasting],

packages/core/src/components/ExportImportMenu/items/UploadConfig.tsx

@@ -23,7 +23,11 @@ export async function handleFileUpload(e: ChangeEvent<HTMLInputElement>) {
   }
 }
 
-export function UploadConfig() {
+type UploadConfigProps = {
+  onClick?: VoidFunction;
+};
+
+export function UploadConfig({ onClick }: UploadConfigProps) {
   const api = useMenuApi();
   const { fileInput, triggerUpload } = useFileUploader({
     accept: ".json",
@@ -32,9 +36,13 @@ export function UploadConfig() {
   return (
     <ListItem
       as="button"
-      {...mergeProps(api.getItemProps({ value: "upload-harmonizer-config" }), {
-        onClick: triggerUpload,
-      })}
+      {...mergeProps(
+        api.getItemProps({ value: "upload-harmonizer-config" }),
+        {
+          onClick: triggerUpload,
+        },
+        { onClick },
+      )}
     >
       {fileInput}
       <ListItemContent>Upload Harmonizer config</ListItemContent>

packages/core/src/components/FileInputButton/useFileUploader.tsx

@@ -20,6 +20,7 @@ const HiddenFileInput = memo(function HiddenFileInput({
       accept={accept}
       multiple={multiple}
       onChange={onFilesChange}
+      onClick={(e) => e.stopPropagation()}
       className="sr-only"
       type="file"
       aria-hidden="true"

packages/web-app/src/components/FigmaPluginBanner/FigmaPluginBanner.tsx

@@ -1,3 +1,5 @@
+import { trackEvent } from "@web-app/plausible";
+
 import { BgMode } from "@core/components/BgMode/BgMode";
 import { Button } from "@core/components/Button/Button";
 import { MCross } from "@core/components/Icon/MCross";
@@ -20,6 +22,7 @@ export function FigmaPluginBanner() {
           kind="primary"
           href={HARMONIZER_FIGMA_PLUGIN_URL}
           target="_blank"
+          onClick={() => trackEvent("Figma Banner: Follow")}
         >
           <img src={logoImage} alt="Harmonizer Logo" className={styles.logo} />
           Check out Harmonizer Figma Plugin
@@ -31,6 +34,7 @@ export function FigmaPluginBanner() {
           icon={<MCross />}
           aria-label="Close banner"
           onClick={() => $isBannerClosed.set(true)}
+          onClickCapture={() => trackEvent("Figma Banner: Close")}
         />
       </div>
     </BgMode>

packages/web-app/src/components/WebAppActions/WebAppActions.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useState } from "react";
 
+import { trackEvent } from "@web-app/plausible";
+
 import { Button } from "@core/components/Button/Button";
 import { ExportImportMenu } from "@core/components/ExportImportMenu/ExportImportMenu";
 import { ExportConfigsList } from "@core/components/ExportImportMenu/items/ExportConfigsList";
@@ -38,12 +40,14 @@ export function WebAppActions() {
       <CopyPermantentUrlButton />
       <ExportImportMenu>
         <MenuItemGroup id="menu-group-upload" label="Import">
-          <PasteWebAppUrl value="paste-url" />
-          <UploadConfig />
+          <PasteWebAppUrl value="paste-url" onPaste={() => trackEvent("Imported: URL Pasted")} />
+          <UploadConfig onClick={() => trackEvent("Imported: Config uploaded")} />
         </MenuItemGroup>
         <MenuItemSeparator />
         <MenuItemGroup id="menu-group-export" label="Export">
-          <ExportConfigsList />
+          <ExportConfigsList
+            onClick={(exportTarget) => trackEvent("Exported", { props: { exportTarget } })}
+          />
         </MenuItemGroup>
       </ExportImportMenu>
     </>

packages/web-app/tsconfig.app.json

@@ -12,7 +12,8 @@
 
     "baseUrl": ".",
     "paths": {
-      "@core/*": ["../core/src/*"]
+      "@core/*": ["../core/src/*"],
+      "@web-app/*": ["src/*"]
     }
   },
   "include": ["src"]