Merge branch 'dev' into IN-834-modal-coverage-area

packages/api/router/location/mutation.update.schema.ts

@@ -15,7 +15,7 @@ export const ZUpdateSchema = z
 				city: z.string(),
 				postCode: z.string().nullable(),
 				primary: z.boolean(),
-				mailOnly: z.boolean().nullable(),
+				mailOnly: z.boolean(),
 				longitude: z.number().nullable(),
 				latitude: z.number().nullable(),
 				geoJSON: Geometry,
@@ -34,7 +34,7 @@ export const ZUpdateSchema = z
 			.partial(),
 	})
 	.transform(({ id, data }) => {
-		const { accessible, countryId, govDistId, services, mailOnly, ...rest } = data
+		const { accessible, countryId, govDistId, services, ...rest } = data
 
 		const accessibleAttrId = allAttributes.find(({ tag }) => tag === 'wheelchair-accessible')?.id
 
@@ -44,7 +44,6 @@ export const ZUpdateSchema = z
 			where: { id },
 			data: {
 				...rest,
-				mailOnly: mailOnly === false ? null : mailOnly,
 				...(updateAccessibility
 					? accessible.boolean !== null
 						? {

packages/api/schemas/create/orgLocation.ts

@@ -168,7 +168,7 @@ export const EditOrgLocationSchema = z
 				city: z.string(),
 				postCode: z.string().nullable(),
 				primary: z.boolean(),
-				mailOnly: z.boolean().nullable(),
+				mailOnly: z.boolean().default(false),
 				longitude: z.number().nullable(),
 				latitude: z.number().nullable(),
 				geoJSON: Geometry,
@@ -187,7 +187,7 @@ export const EditOrgLocationSchema = z
 			.partial(),
 	})
 	.transform(({ id, data }) => {
-		const { accessible, countryId, govDistId, services, mailOnly, ...rest } = data
+		const { accessible, countryId, govDistId, services, ...rest } = data
 
 		const accessibleAttrId = allAttributes.find(({ tag }) => tag === 'wheelchair-accessible')?.id
 
@@ -197,7 +197,6 @@ export const EditOrgLocationSchema = z
 			where: { id },
 			data: {
 				...rest,
-				mailOnly: mailOnly === false ? null : mailOnly,
 				...(updateAccessibility
 					? accessible.boolean !== null
 						? {

packages/ui/.storybook/preview.tsx

@@ -3,7 +3,7 @@ import './font.css'
 import { type BADGE } from '@geometricpanda/storybook-addon-badges'
 import { type Preview } from '@storybook/react'
 import { type WhyDidYouRenderOptions } from '@welldone-software/why-did-you-render'
-import { type RequestHandler, rest } from 'msw'
+import { http, passthrough, type RequestHandler } from 'msw'
 import { initialize as initializeMsw, mswLoader } from 'msw-storybook-addon'
 import { type BaseRouter } from 'next/dist/shared/lib/router/router'
 import { type Router } from 'next/router'
@@ -35,7 +35,7 @@ initializeMsw({
 		},
 	},
 	onUnhandledRequest: ({ method, url }) => {
-		if (url.pathname.startsWith('/trpc' || '/api')) {
+		if (url.startsWith('/trpc' || '/api')) {
 			console.error(`Unhandled ${method} request to ${url}.
 
         This exception has been only logged in the console, however, it's strongly recommended to resolve this error as you don't want unmocked data in Storybook stories.
@@ -74,7 +74,7 @@ const preview: Preview = {
 		// },
 		msw: {
 			handlers: {
-				passthrough: rest.get(/^\/(?!api|trpc).*$/, (req) => req.passthrough()),
+				passthrough: http.get(/^\/(?!api|trpc).*$/, () => passthrough()),
 			},
 		},
 	},

packages/ui/components/data-portal/AddressDrawer.tsx

@@ -77,7 +77,7 @@ const FormSchema = z.object({
 			city: z.string(),
 			postCode: z.string().nullable().transform(transformNullString),
 			primary: z.coerce.boolean(),
-			mailOnly: z.boolean().nullable(),
+			mailOnly: z.boolean(),
 			longitude: z.coerce.number().nullable(),
 			latitude: z.coerce.number().nullable(),
 			geoWKT: z.string().nullable().transform(transformNullString),

packages/ui/components/data-portal/MultiSelectPopover.tsx

@@ -113,7 +113,7 @@ export const MultiSelectPopover = ({
 					</UnstyledButton>
 				</Popover.Target>
 				<Popover.Dropdown>
-					<ScrollArea.Autosize mah={250}>
+					<ScrollArea.Autosize mah={250} placeholder={null}>
 						{items.map((props, index) => (
 							<Checkbox
 								key={props.value}

packages/ui/lib/getTrpcMock.ts

@@ -1,22 +1,24 @@
 import { action } from '@storybook/addon-actions'
-import { rest, type RestHandler, type RestRequest } from 'msw'
+import { type DefaultBodyType, delay, http, type HttpHandler, HttpResponse, type StrictRequest } from 'msw'
 
 import path from 'path'
 import querystring from 'querystring'
 
 import { type ApiInput, type ApiOutput } from '@weareinreach/api'
+import { getHTTPStatusCodeFromError } from '@weareinreach/api/errorTypes'
 import { transformer } from '@weareinreach/util/transformer'
 
 import { getBaseUrl } from './trpcClient'
 import { type ErrorInput, jsonRpcErrorResponse, jsonRpcSuccessResponse } from './trpcResponse'
 
-const getReqData = async (req: RestRequest) => {
+const getReqData = async (req: StrictRequest<DefaultBodyType>) => {
 	if (req.method === 'POST') {
 		const body = await req.clone().text()
 		return body
 	}
-	const query = req.url.search.charAt(0) === '?' ? req.url.search.substring(1) : req.url.search
-	const parsed = querystring.parse(query)
+	const url = new URL(req.url)
+	// const query = req.url.search.charAt(0) === '?' ? req.url.search.substring(1) : req.url.search
+	const parsed = querystring.parse(url.searchParams.toString())
 	if (parsed.input) {
 		if (Array.isArray(parsed.input)) return parsed.input[0] ?? ''
 		return parsed.input
@@ -43,9 +45,9 @@ export const getTRPCMock = <
 	O extends ApiOutput[K1][K2] | ((input: ApiInput[K1][K2]) => ApiOutput[K1][K2]),
 >(
 	endpoint: TRPCEndpointSuccess<K1, K2, O> | TRPCEndpointError<K1, K2>
-): RestHandler => {
+): HttpHandler => {
 	// #region msw handler
-	const fn = endpoint.type === 'mutation' ? rest.post : rest.get
+	const fn = endpoint.type === 'mutation' ? http.post : http.get
 
 	const type = endpoint.type === 'mutation' ? 'mutation' : 'query'
 	const trpcRequest = action(`${type === 'query' ? '❓' : '✍️'} tRPC Request [${endpoint.path.join('.')}]`)
@@ -54,26 +56,40 @@ export const getTRPCMock = <
 
 	if (typeof endpoint.response === 'function') {
 		const { response } = endpoint
-		return fn(route, async (req, res, ctx) => {
-			const data = await getReqData(req)
+		return fn(route, async (ctx) => {
+			const data = await getReqData(ctx.request)
+
 			const transformed = transformer.parse<ApiInput[K1][K2]>(data)
 			trpcRequest(transformed)
-			return res(
-				ctx.json(jsonRpcSuccessResponse(endpoint.path, response(transformed))),
-				ctx.delay(endpoint.delay)
-			)
+			await delay(endpoint.delay)
+			const responseData = jsonRpcSuccessResponse(endpoint.path, response(transformed))
+			return HttpResponse.json(responseData, { status: 200 })
 		})
 	}
 
-	return fn(route, async (req, res, ctx) => {
-		const data = await getReqData(req)
+	if (endpoint.error) {
+		return fn(route, async (ctx) => {
+			const data = await getReqData(ctx.request)
+			const transformed = transformer.parse<ApiInput[K1][K2]>(data)
+			trpcRequest(transformed)
+			await delay(endpoint.delay)
+			const responseData = jsonRpcErrorResponse(endpoint.path, endpoint.error)
+			const httpStatus = getHTTPStatusCodeFromError({
+				code: endpoint.error.code,
+				message: endpoint.error.message,
+				name: endpoint.error.code,
+			})
+			return HttpResponse.json(responseData, { status: httpStatus })
+		})
+	}
+
+	return fn(route, async (ctx) => {
+		const data = await getReqData(ctx.request)
 		const transformed = transformer.parse<ApiInput[K1][K2]>(data)
 		trpcRequest(transformed)
-		if (endpoint.error) {
-			return res(ctx.json(jsonRpcErrorResponse(endpoint.path, endpoint.error)), ctx.delay(endpoint.delay))
-		}
-
-		return res(ctx.json(jsonRpcSuccessResponse(endpoint.path, endpoint.response)), ctx.delay(endpoint.delay))
+		await delay(endpoint.delay)
+		const responseData = jsonRpcSuccessResponse(endpoint.path, endpoint.response)
+		return HttpResponse.json(responseData, { status: 200 })
 	})
 	// #endregion
 }
@@ -100,5 +116,5 @@ export type MockDataObject<P extends keyof ApiOutput> = {
 	[K in keyof ApiOutput[P]]?: ApiOutput[P][K] | ((input: ApiInput[P][K]) => ApiOutput[P][K])
 }
 export type MockHandlerObject<P extends keyof ApiOutput> = {
-	[K in keyof ApiOutput[P]]?: RestHandler
+	[K in keyof ApiOutput[P]]?: HttpHandler
 }

packages/ui/mockData/location.ts

@@ -13,7 +13,7 @@ const locationData = {
 			countryId: 'ctry_01GW2HHDK9M26M80SG63T21SVH',
 			latitude: 38.91,
 			longitude: -77.032,
-			mailOnly: null,
+			mailOnly: false,
 			published: true,
 			accessible: {
 				supplementId: undefined,

packages/ui/mockData/login.ts

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import { rest } from 'msw'
+import { delay, http, HttpResponse, type PathParams } from 'msw'
 
 import querystring from 'querystring'
 
@@ -14,27 +14,33 @@ const providerResponse = {
 }
 
 export const providers = () =>
-	rest.get('/api/auth/providers', (req, res, ctx) => res(ctx.delay(), ctx.json(providerResponse)))
+	http.get('/api/auth/providers', async () => {
+		await delay()
+		return HttpResponse.json(providerResponse)
+	})
 
 export const csrf = () =>
-	rest.get('/api/auth/csrf', (req, res, ctx) =>
-		res(
-			ctx.delay(),
-			ctx.json({ csrfToken: 'd11134f8413295d97df65b0dfdb7166db4bb1e49af48345a4d567a841ffd048b' })
-		)
-	)
+	http.get('/api/auth/csrf', async () => {
+		await delay()
+		return HttpResponse.json({
+			csrfToken: 'd11134f8413295d97df65b0dfdb7166db4bb1e49af48345a4d567a841ffd048b',
+		})
+	})
 
 export const signin = () =>
-	rest.all('/api/auth/signin', (req, res, ctx) => {
-		return res(ctx.delay(), ctx.json({ ...req.params }))
+	http.all('/api/auth/signin', async (ctx) => {
+		await delay()
+		return HttpResponse.json({ ...ctx.params })
 	})
 
 export const cognito = () =>
-	rest.post('/api/auth/callback/cognito', async (req, res, ctx) => {
-		const body = await req.text()
+	http.post<PathParams, SignInResponse>('/api/auth/callback/cognito', async (ctx) => {
+		const body = await ctx.request.text()
 		const data = querystring.parse(body)
 		const { password } = data
 
+		await delay()
+
 		if (password === 'good') {
 			const returnData = {
 				url: 'http://localhost:6006/?path=/story/modals-login--modal',
@@ -43,7 +49,7 @@ export const cognito = () =>
 				error: undefined,
 			}
 			action('Login with good credentials')(returnData)
-			return res(ctx.delay(), ctx.json(returnData))
+			return HttpResponse.json(returnData)
 		}
 		const returnData = {
 			error: 'Incorrect username or password.',
@@ -52,5 +58,12 @@ export const cognito = () =>
 			url: null,
 		}
 		action('Login with bad credentials')(returnData)
-		return res(ctx.delay(), ctx.status(401), ctx.json(returnData))
+		return HttpResponse.json(returnData, { status: 401 })
 	})
+
+interface SignInResponse {
+	error: string | undefined
+	status: number
+	ok: boolean
+	url: string | null
+}

packages/ui/modals/MoreFilter.tsx

@@ -374,6 +374,7 @@ const MoreFilterBody = forwardRef<HTMLButtonElement, MoreFilterProps>(
 				>
 					<Stack spacing={24}>
 						<ScrollArea.Autosize
+							placeholder={null}
 							classNames={{ viewport: accordionClasses.scrollArea }}
 							mah={scrollAreaMaxHeight}
 						>

packages/ui/other/DataViewer.tsx

@@ -3,7 +3,7 @@ import { JsonViewer, type JsonViewerProps } from '@textea/json-viewer'
 
 export const DataViewer = ({ value, enableClipboard, dontCollapse, ...props }: DataViewerProps) => (
 	<Card>
-		<ScrollArea.Autosize mah='50vh'>
+		<ScrollArea.Autosize mah='50vh' placeholder={null}>
 			<JsonViewer
 				value={value}
 				quotesOnKeys={false}

packages/ui/package.json

@@ -139,8 +139,8 @@
 		"luxon": "3.4.4",
 		"mantine-react-table": "1.3.4",
 		"merge-anything": "5.1.7",
-		"msw": "1.3.2",
-		"msw-storybook-addon": "1.10.0",
+		"msw": "2.0.11",
+		"msw-storybook-addon": "2.0.0--canary.122.06f0c92.0",
 		"next": "14.0.4",
 		"next-auth": "4.24.5",
 		"next-i18next": "15.1.1",