From 21842cdac10557ab95b4b36e0ea41bfd51e53be5 Mon Sep 17 00:00:00 2001 From: Ty Tremblay Date: Tue, 17 Dec 2024 12:41:03 -0500 Subject: [PATCH 1/5] add statsig --- .gitignore | 5 + config/2024/config.json | 1 + package.json | 5 + pnpm-lock.yaml | 193 ++++++++++++++++++++++++ public/schema.json | 14 +- src/app.tsx | 54 ++++--- src/assets/schema.json | 14 +- src/components/inputs/BaseInputProps.ts | 16 +- 8 files changed, 275 insertions(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index a547bf3..22446d9 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,8 @@ dist-ssr *.njsproj *.sln *.sw? + + +# Environment +.env +.env.* \ No newline at end of file diff --git a/config/2024/config.json b/config/2024/config.json index 22fc3fb..9440f26 100644 --- a/config/2024/config.json +++ b/config/2024/config.json @@ -2,6 +2,7 @@ "$schema": "https://frc2713.github.io/QRScout/schema.json", "title": "QRScout", "page_title": "Crescendo", + "teamNumber": 2713, "delimiter": "\t", "sections": [ { diff --git a/package.json b/package.json index e2a80cf..444c8dc 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,17 @@ "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", + "@statsig/react-bindings": "^3.8.1", + "@statsig/session-replay": "^3.8.1", + "@statsig/web-analytics": "^3.8.1", "@vitejs/plugin-react": "^4.3.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "immer": "^10.1.1", + "install": "^0.13.0", "lodash": "^4.17.21", "lucide-react": "^0.456.0", + "npm": "^11.0.0", "qrcode.react": "^3.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34e5557..135bc08 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,15 @@ importers: '@radix-ui/react-toggle-group': specifier: ^1.1.1 version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@statsig/react-bindings': + specifier: ^3.8.1 + version: 3.8.1(react@18.2.0) + '@statsig/session-replay': + specifier: ^3.8.1 + version: 3.8.1 + '@statsig/web-analytics': + specifier: ^3.8.1 + version: 3.8.1 '@vitejs/plugin-react': specifier: ^4.3.4 version: 4.3.4(vite@5.4.11(@types/node@22.10.2)) @@ -53,12 +62,18 @@ importers: immer: specifier: ^10.1.1 version: 10.1.1 + install: + specifier: ^0.13.0 + version: 0.13.0 lodash: specifier: ^4.17.21 version: 4.17.21 lucide-react: specifier: ^0.456.0 version: 0.456.0(react@18.2.0) + npm: + specifier: ^11.0.0 + version: 11.0.0 qrcode.react: specifier: ^3.2.0 version: 3.2.0(react@18.2.0) @@ -880,6 +895,26 @@ packages: cpu: [x64] os: [win32] + '@rrweb/types@2.0.0-alpha.18': + resolution: {integrity: sha512-iMH3amHthJZ9x3gGmBPmdfim7wLGygC2GciIkw2A6SO8giSn8PHYtRT8OKNH4V+k3SZ6RSnYHcTQxBA7pSWZ3Q==} + + '@statsig/client-core@3.8.1': + resolution: {integrity: sha512-nXLU9bt2NTaVBWUyYkFnAQdyP0Js7q5eYWhJDXd6x4d/6o3v4T3Qv8F9BxE9ukvs6cbXc0Bzz3TipGYMRPhVRA==} + + '@statsig/js-client@3.8.1': + resolution: {integrity: sha512-CqTZdJ6BOFq8P6gcv/nzXI60iXDE55UgjVvul411OmH70TeJzdhRgnQi5SmR7PFfMcPP2KjUTTD8oRxua1G2Cw==} + + '@statsig/react-bindings@3.8.1': + resolution: {integrity: sha512-kJ9nnRSgNo7K0LYDlzqs5zEnR8ao6A6hC0WfBiCNoo2p5s4WSeJPDSQO0O5OoNRezF2JXR43bej2syyuqC21Pg==} + peerDependencies: + react: ^16.6.3 || ^17.0.0 || ^18.0.0 + + '@statsig/session-replay@3.8.1': + resolution: {integrity: sha512-Ab4fDAV/Xel3tKScLCKx6UvoUlJC43QCq007L88Dp1288eAVNG6Ei1mohwn1Ah/u9kWI5/5tFSuPvFICPBHasw==} + + '@statsig/web-analytics@3.8.1': + resolution: {integrity: sha512-LnMQR+qqXkRZigrNQszurQwrvcdJ6lYVf5TAcI+2x7gh4i3+6hqvRwxUz7jenb1VsSWY2/n+qUARxAtQFFz1Zw==} + '@tailwindcss/forms@0.5.9': resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==} peerDependencies: @@ -918,6 +953,9 @@ packages: '@types/babel__traverse@7.20.6': resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==} + '@types/css-font-loading-module@0.0.7': + resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==} + '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} @@ -947,6 +985,9 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 + '@xstate/fsm@1.6.5': + resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==} + acorn-walk@8.3.4: resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==} engines: {node: '>=0.4.0'} @@ -999,6 +1040,10 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + base64-arraybuffer@1.0.2: + resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} + engines: {node: '>= 0.6.0'} + binary-extensions@2.3.0: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} @@ -1115,6 +1160,9 @@ packages: fastq@1.17.1: resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} + fflate@0.4.8: + resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} + fill-range@7.1.1: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} @@ -1165,6 +1213,10 @@ packages: immer@10.1.1: resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==} + install@0.13.0: + resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==} + engines: {node: '>= 0.10'} + invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} @@ -1263,6 +1315,9 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + mitt@3.0.1: + resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} + monaco-editor@0.46.0: resolution: {integrity: sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==} @@ -1288,6 +1343,78 @@ packages: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} + npm@11.0.0: + resolution: {integrity: sha512-Ed/ylWXSKXx058WUqXYlgb3pafCqXL5vWzZEvwCKFsBl7OYQlNn/u4ESW+ON+OG6Q+uCRLPTDGHreX6aJEDj7A==} + engines: {node: ^20.17.0 || >=22.9.0} + hasBin: true + bundledDependencies: + - '@isaacs/string-locale-compare' + - '@npmcli/arborist' + - '@npmcli/config' + - '@npmcli/fs' + - '@npmcli/map-workspaces' + - '@npmcli/package-json' + - '@npmcli/promise-spawn' + - '@npmcli/redact' + - '@npmcli/run-script' + - '@sigstore/tuf' + - abbrev + - archy + - cacache + - chalk + - ci-info + - cli-columns + - fastest-levenshtein + - fs-minipass + - glob + - graceful-fs + - hosted-git-info + - ini + - init-package-json + - is-cidr + - json-parse-even-better-errors + - libnpmaccess + - libnpmdiff + - libnpmexec + - libnpmfund + - libnpmorg + - libnpmpack + - libnpmpublish + - libnpmsearch + - libnpmteam + - libnpmversion + - make-fetch-happen + - minimatch + - minipass + - minipass-pipeline + - ms + - node-gyp + - nopt + - normalize-package-data + - npm-audit-report + - npm-install-checks + - npm-package-arg + - npm-pick-manifest + - npm-profile + - npm-registry-fetch + - npm-user-validate + - p-map + - pacote + - parse-conflict-json + - proc-log + - qrcode-terminal + - read + - semver + - spdx-expression-parse + - ssri + - supports-color + - tar + - text-table + - tiny-relative-date + - treeverse + - validate-npm-package-name + - which + object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -1456,6 +1583,15 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + rrdom@2.0.0-alpha.18: + resolution: {integrity: sha512-fSFzFFxbqAViITyYVA4Z0o5G6p1nEqEr/N8vdgSKie9Rn0FJxDSNJgjV0yiCIzcDs0QR+hpvgFhpbdZ6JIr5Nw==} + + rrweb-snapshot@2.0.0-alpha.18: + resolution: {integrity: sha512-hBHZL/NfgQX6wO1D9mpwqFu1NJPpim+moIcKhFEjVTZVRUfCln+LOugRc4teVTCISYHN8Cw5e2iNTWCSm+SkoA==} + + rrweb@2.0.0-alpha.12: + resolution: {integrity: sha512-lUGwBV7gmbwz1dIgzo9EEayIVyxoTIF6NBF6+Jctqs4Uy45QkyARtikpQlCUfxVCGTCQ0FOee9jeVYsG39oq1g==} + run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} @@ -2354,6 +2490,30 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.28.1': optional: true + '@rrweb/types@2.0.0-alpha.18': {} + + '@statsig/client-core@3.8.1': {} + + '@statsig/js-client@3.8.1': + dependencies: + '@statsig/client-core': 3.8.1 + + '@statsig/react-bindings@3.8.1(react@18.2.0)': + dependencies: + '@statsig/client-core': 3.8.1 + '@statsig/js-client': 3.8.1 + react: 18.2.0 + + '@statsig/session-replay@3.8.1': + dependencies: + '@statsig/client-core': 3.8.1 + rrweb: 2.0.0-alpha.12 + + '@statsig/web-analytics@3.8.1': + dependencies: + '@statsig/client-core': 3.8.1 + '@statsig/js-client': 3.8.1 + '@tailwindcss/forms@0.5.9(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.2)))': dependencies: mini-svg-data-uri: 1.4.4 @@ -2396,6 +2556,8 @@ snapshots: dependencies: '@babel/types': 7.26.3 + '@types/css-font-loading-module@0.0.7': {} + '@types/estree@1.0.6': {} '@types/lodash@4.17.13': {} @@ -2430,6 +2592,8 @@ snapshots: transitivePeerDependencies: - supports-color + '@xstate/fsm@1.6.5': {} + acorn-walk@8.3.4: dependencies: acorn: 8.14.0 @@ -2473,6 +2637,8 @@ snapshots: balanced-match@1.0.2: {} + base64-arraybuffer@1.0.2: {} + binary-extensions@2.3.0: {} brace-expansion@2.0.1: @@ -2596,6 +2762,8 @@ snapshots: dependencies: reusify: 1.0.4 + fflate@0.4.8: {} + fill-range@7.1.1: dependencies: to-regex-range: 5.0.1 @@ -2641,6 +2809,8 @@ snapshots: immer@10.1.1: {} + install@0.13.0: {} + invariant@2.2.4: dependencies: loose-envify: 1.4.0 @@ -2716,6 +2886,8 @@ snapshots: minipass@7.1.2: {} + mitt@3.0.1: {} + monaco-editor@0.46.0: {} ms@2.1.3: {} @@ -2734,6 +2906,8 @@ snapshots: normalize-range@0.1.2: {} + npm@11.0.0: {} + object-assign@4.1.1: {} object-hash@3.0.0: {} @@ -2904,6 +3078,25 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.28.1 fsevents: 2.3.3 + rrdom@2.0.0-alpha.18: + dependencies: + rrweb-snapshot: 2.0.0-alpha.18 + + rrweb-snapshot@2.0.0-alpha.18: + dependencies: + postcss: 8.4.49 + + rrweb@2.0.0-alpha.12: + dependencies: + '@rrweb/types': 2.0.0-alpha.18 + '@types/css-font-loading-module': 0.0.7 + '@xstate/fsm': 1.6.5 + base64-arraybuffer: 1.0.2 + fflate: 0.4.8 + mitt: 3.0.1 + rrdom: 2.0.0-alpha.18 + rrweb-snapshot: 2.0.0-alpha.18 + run-parallel@1.2.0: dependencies: queue-microtask: 1.2.3 diff --git a/public/schema.json b/public/schema.json index 55fe722..e7b8503 100644 --- a/public/schema.json +++ b/public/schema.json @@ -2,13 +2,20 @@ "type": "object", "properties": { "title": { - "type": "string" + "type": "string", + "description": "The title of the scouting site. This will be displayed in the header and browser tab." }, "page_title": { - "type": "string" + "type": "string", + "description": "The title of the page" }, "delimiter": { - "type": "string" + "type": "string", + "description": "The delimiter to use when joining the form data" + }, + "teamNumber": { + "type": "number", + "description": "The team number of the team using this form." }, "sections": { "type": "array", @@ -414,6 +421,7 @@ "title", "page_title", "delimiter", + "teamNumber", "sections" ], "additionalProperties": false, diff --git a/src/app.tsx b/src/app.tsx index 391c9a8..87febdc 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { Footer } from './components/Footer'; import { Header } from './components/Header'; import { Sections } from './components/Sections'; @@ -6,28 +7,45 @@ import { ConfigSection } from './components/Sections/ConfigSection'; import { ThemeProvider } from './components/ThemeProvider'; import { useQRScoutState } from './store/store'; +import { StatsigProvider, useClientAsyncInit } from '@statsig/react-bindings'; +import { runStatsigAutoCapture } from '@statsig/web-analytics'; + export function App() { const formData = useQRScoutState(state => state.formData); + const { client } = useClientAsyncInit( + import.meta.env.VITE_STATSIG_CLIENT_KEY, + { + userID: `${formData.teamNumber}`, + }, + ); + + useEffect(() => { + runStatsigAutoCapture(client); + }, [client]); return ( - -
-
-
-

-
{formData.page_title}
-

+ Loading...
}> + +
+
+
+

+
+ {formData.page_title} +
+

-
e.preventDefault()}> -
- - - -
-
-
-
-
- +
e.preventDefault()}> +
+ + + +
+
+ +