Debug missing font

.reflame.config.jsonc

@@ -3,9 +3,9 @@
   // It's basically JSON, with the addition of comments, and looser syntax
   // (trailing commas!).
   // Reflame uses this to identify your app.
-  "appId": "01GVH35S71FJP26W72V3K7CB2N", // prod
+  // "appId": "01GVH35S71FJP26W72V3K7CB2N", // prod
   // "appId": "01GSXZYQT1W0TZDJAG94P9S4BZ", // prod fork
-  // "appId": "01GR550WASJY2G2NSYZ4P54JJV", // dev
+  "appId": "01GR550WASJY2G2NSYZ4P54JJV", // dev
   // This is what shows up in the browser's tab bar.
   "title": "highlight.io",
   // This is the description that shows up in Google search.

frontend/package.json

@@ -14,6 +14,7 @@
 		"@highlight-run/react-mentions": "4.4.2",
 		"@highlight-run/rrweb": "workspace:*",
 		"@highlight-run/ui": "workspace:*",
+		"@reflame/testing": "^0.0.2",
 		"@rehooks/local-storage": "^2.4.0",
 		"@stripe/stripe-js": "^1.32.0",
 		"@tanstack/react-table": "^8.7.9",

frontend/src/components/Progress/Progress.tsx

@@ -17,6 +17,6 @@ const Progress = ({ denominator, numerator, ...props }: Props) => {
 	)
 }
 
-export const Progress_test = <Progress denominator={4} numerator={3} />
+export const Progress_test = <Progress denominator={12} numerator={3} />
 
 export default Progress

packages/ui/package.json

@@ -65,6 +65,7 @@
 	},
 	"dependencies": {
 		"@ariakit/react": "^0.2.17",
+		"@reflame/testing": "^0.0.2",
 		"@rehookify/datepicker": "^4.1.5",
 		"@vanilla-extract/css": "^1.13.0",
 		"@vanilla-extract/recipes": "^0.5.0",

packages/ui/src/components/Box/Box.stories.tsx

@@ -16,6 +16,6 @@ export const Basic = () => (
 		borderRadius="6"
 		border="primary"
 	>
-		Hello! 👋
+		Hello! ???7 👋
 	</Box>
 )

packages/ui/src/components/ComboboxSelect/ComboboxSelect.tsx

@@ -18,6 +18,7 @@ import * as styles from './styles.css'
 import { Text } from '../Text/Text'
 import clsx, { ClassValue } from 'clsx'
 import { vars } from '../../css/vars'
+import type { ComponentTest } from '@reflame/testing'
 
 type Option = {
 	key: string
@@ -185,14 +186,14 @@ export const ComboboxSelect = <T extends string | string[]>({
 	)
 }
 
-export const ComboboxSelect_test = () => {
+export const ComboboxSelect_test: ComponentTest = () => {
 	const [value, setValue] = useState('')
 	const options = [
 		{ key: 'red', render: 'Red' },
 		{ key: 'blue', render: 'Blue' },
 		{ key: 'green', render: 'Green' },
 	]
-	const label = 'Select a color!'
+	const label = 'Select a color!!'
 	return (
 		<ComboboxSelect
 			label={label}
@@ -207,13 +208,9 @@ export const ComboboxSelect_test = () => {
 	)
 }
 
-// Will add a TS type package for this stuff soon!
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-ComboboxSelect_test.run = async ({ step }) => {
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	await step('open dialog', async ({ screen, user }) => {
+ComboboxSelect_test.run = async ({ step, screen, user, screenshot }) => {
+	// await screenshot(element)
+	await step('open dialog', async () => {
 		const combobox = await screen.findByRole('combobox')
 		await user.click(combobox)
 		const dialog = await screen.findByRole('dialog')
@@ -224,9 +221,7 @@ ComboboxSelect_test.run = async ({ step }) => {
 		}
 	})
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	await step('enter filter text', async ({ screen, user }) => {
+	await step('enter filter text', async () => {
 		const filterInput = await screen.findByPlaceholderText('Filter...')
 		await user.type(filterInput, 're')
 		return {
@@ -236,9 +231,7 @@ ComboboxSelect_test.run = async ({ step }) => {
 		}
 	})
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	await step('select option', async ({ screen, user }) => {
+	await step('select option', async () => {
 		const redOption = await screen.findByText('Red')
 		await user.click(redOption)
 	})

yarn.lock

@@ -12294,6 +12294,7 @@ __metadata:
     "@highlight-run/rrweb-types": "workspace:*"
     "@highlight-run/sourcemap-uploader": "workspace:*"
     "@highlight-run/ui": "workspace:*"
+    "@reflame/testing": ^0.0.2
     "@rehooks/local-storage": ^2.4.0
     "@stripe/stripe-js": ^1.32.0
     "@svgr/cli": ^5.5.0
@@ -12853,6 +12854,7 @@ __metadata:
     "@capsizecss/core": ^3.0.0
     "@capsizecss/metrics": ^0.3.0
     "@mdx-js/react": ^1.6.22
+    "@reflame/testing": ^0.0.2
     "@rehookify/datepicker": ^4.1.5
     "@storybook/addon-essentials": ^7.0.18
     "@storybook/addon-interactions": ^7.0.18
@@ -18805,6 +18807,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reflame/testing@npm:^0.0.2":
+  version: 0.0.2
+  resolution: "@reflame/testing@npm:0.0.2"
+  dependencies:
+    "@testing-library/dom": ^9.3.3
+    "@testing-library/user-event": ^14.5.1
+    "@types/react": ^18.2.45
+  checksum: d01e4eb5e5b4304ff8aa914242cf9232c29992bc500f1b6dbceb112310579f70227889aa5015f7244f423fefe1b4771b2ce6adfb2cd74eb89ea6767568ad8986
+  languageName: node
+  linkType: hard
+
 "@rehookify/datepicker@npm:^4.1.5":
   version: 4.2.0
   resolution: "@rehookify/datepicker@npm:4.2.0"
@@ -22115,7 +22128,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:>=7":
+"@testing-library/dom@npm:>=7, @testing-library/dom@npm:^9.3.3":
   version: 9.3.3
   resolution: "@testing-library/dom@npm:9.3.3"
   dependencies:
@@ -22258,6 +22271,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^14.5.1":
+  version: 14.5.1
+  resolution: "@testing-library/user-event@npm:14.5.1"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 3e6bc9fd53dfe2f3648190193ed2fd4bca2a1bfb47f68810df3b33f05412526e5fd5c4ef9dc5375635e0f4cdf1859916867b597eed22bda1321e04242ea6c519
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"