chore: add border for remote modules

ScriptedAlchemy · ScriptedAlchemy · commit 0dc0e3a03096 · 2025-03-24T19:03:52.000-07:00
diff --git a/examples/federation/epic-stack-remote/app/components/error-boundary.tsx b/examples/federation/epic-stack-remote/app/components/error-boundary.tsx
@@ -41,7 +41,7 @@ export function GeneralErrorBoundary({
 	}, [error, isResponse])
 
 	return (
-		<div className="container flex items-center justify-center p-20 text-h2">
+		<div className="container flex items-center justify-center p-20 text-h2 border-2 border-red-500">
 			{isResponse
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,
diff --git a/examples/federation/epic-stack-remote/app/components/forms.tsx b/examples/federation/epic-stack-remote/app/components/forms.tsx
@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1 border-2 border-red-500">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-[10px] text-foreground-destructive">
 					{e}
@@ -49,7 +49,7 @@ export function Field({
 	const id = inputProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<Input
 				id={id}
@@ -79,7 +79,7 @@ export function OTPField({
 	const id = inputProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<InputOTP
 				pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
@@ -123,7 +123,7 @@ export function TextareaField({
 	const id = textareaProps.id ?? textareaProps.name ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<Textarea
 				id={id}
@@ -166,7 +166,7 @@ export function CheckboxField({
 	const errorId = errors?.length ? `${id}-error` : undefined
 
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<div className="flex gap-2">
 				<Checkbox
 					{...checkboxProps}
diff --git a/examples/federation/epic-stack-remote/app/components/progress-bar.tsx b/examples/federation/epic-stack-remote/app/components/progress-bar.tsx
@@ -32,7 +32,7 @@ function EpicProgress() {
 			role="progressbar"
 			aria-hidden={delayedPending ? undefined : true}
 			aria-valuetext={delayedPending ? 'Loading' : undefined}
-			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
+			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse border-2 border-red-500"
 		>
 			<div
 				ref={ref}
diff --git a/examples/federation/epic-stack-remote/app/components/search-bar.tsx b/examples/federation/epic-stack-remote/app/components/search-bar.tsx
@@ -31,7 +31,7 @@ export function SearchBar({
 		<Form
 			method="GET"
 			action="/users"
-			className="flex flex-wrap items-center justify-center gap-2"
+			className="flex flex-wrap items-center justify-center gap-2 border-2 border-red-500"
 			onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
 		>
 			<div className="flex-1">
diff --git a/examples/federation/epic-stack-remote/app/components/spacer.tsx b/examples/federation/epic-stack-remote/app/components/spacer.tsx
@@ -53,5 +53,5 @@ export function Spacer({
 		'4xl': 'h-44',
 	}
 	const className = options[size]
-	return <div className={className} />
+	return <div className={className + " border-2 border-red-500"} />
 }
diff --git a/examples/federation/epic-stack-remote/app/components/ui/button.tsx b/examples/federation/epic-stack-remote/app/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-2 border-red-500',
 	{
 		variants: {
 			variant: {
diff --git a/examples/federation/epic-stack-remote/app/components/ui/checkbox.tsx b/examples/federation/epic-stack-remote/app/components/ui/checkbox.tsx
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+			'peer h-4 w-4 shrink-0 rounded-sm border-2 border-red-500 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
 			className,
 		)}
 		{...props}
diff --git a/examples/federation/epic-stack-remote/app/components/ui/dropdown-menu.tsx b/examples/federation/epic-stack-remote/app/components/ui/dropdown-menu.tsx
@@ -180,7 +180,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
 		<span
-			className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+			className={cn('ml-auto text-xs tracking-widest opacity-60 border-2 border-red-500', className)}
 			{...props}
 		/>
 	)
diff --git a/examples/federation/epic-stack-remote/app/components/ui/input-otp.tsx b/examples/federation/epic-stack-remote/app/components/ui/input-otp.tsx
@@ -23,7 +23,7 @@ const InputOTPGroup = React.forwardRef<
 	React.ElementRef<'div'>,
 	React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('flex items-center', className)} {...props} />
+	<div ref={ref} className={cn('flex items-center border-2 border-red-500', className)} {...props} />
 ))
 InputOTPGroup.displayName = 'InputOTPGroup'
 
@@ -40,7 +40,7 @@ const InputOTPSlot = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
+				'relative flex h-10 w-10 items-center justify-center border-2 border-red-500 text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
 				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
 				className,
 			)}
@@ -61,7 +61,7 @@ const InputOTPSeparator = React.forwardRef<
 	React.ElementRef<'div'>,
 	React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
-	<div ref={ref} role="separator" {...props}>
+	<div ref={ref} role="separator" className="border-2 border-red-500" {...props}>
 		-
 	</div>
 ))
diff --git a/examples/federation/epic-stack-remote/app/components/ui/input.tsx b/examples/federation/epic-stack-remote/app/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
+					'flex h-10 w-full rounded-md border-2 border-red-500 bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
 					className,
 				)}
 				ref={ref}
diff --git a/examples/federation/epic-stack-remote/app/components/ui/status-button.tsx b/examples/federation/epic-stack-remote/app/components/ui/status-button.tsx
@@ -27,23 +27,23 @@ export const StatusButton = React.forwardRef<
 		pending: delayedPending ? (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center"
+				className="inline-flex h-6 w-6 items-center justify-center border-2 border-red-500"
 			>
 				<Icon name="update" className="animate-spin" title="loading" />
 			</div>
 		) : null,
 		success: (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center"
+				className="inline-flex h-6 w-6 items-center justify-center border-2 border-red-500"
 			>
 				<Icon name="check" title="success" />
 			</div>
 		),
 		error: (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive"
+				className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive border-2 border-red-500"
 			>
 				<Icon
 					name="cross-1"
@@ -61,7 +61,7 @@ export const StatusButton = React.forwardRef<
 			className={cn('flex justify-center gap-4', className)}
 			{...props}
 		>
-			<div>{children}</div>
+			<div className="border-2 border-red-500">{children}</div>
 			{message ? (
 				<TooltipProvider>
 					<Tooltip>
diff --git a/examples/federation/epic-stack-remote/app/components/ui/textarea.tsx b/examples/federation/epic-stack-remote/app/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex min-h-[80px] w-full rounded-md border-2 border-red-500 bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
 					className,
 				)}
 				ref={ref}
diff --git a/examples/federation/epic-stack-remote/app/components/user-dropdown.tsx b/examples/federation/epic-stack-remote/app/components/user-dropdown.tsx
@@ -16,53 +16,55 @@ export function UserDropdown() {
 	const user = useUser()
 	const formRef = useRef<HTMLFormElement>(null)
 	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button asChild variant="secondary">
-					<Link
-						to={`/users/${user.username}`}
-						// this is for progressive enhancement
-						onClick={(e) => e.preventDefault()}
-						className="flex items-center gap-2"
-					>
-						<img
-							className="h-8 w-8 rounded-full object-cover"
-							alt={user.name ?? user.username}
-							src={getUserImgSrc(user.image?.id)}
-						/>
-						<span className="text-body-sm font-bold">
-							{user.name ?? user.username}
-						</span>
-					</Link>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuPortal>
-				<DropdownMenuContent sideOffset={8} align="end">
-					<DropdownMenuItem asChild>
-						<Link prefetch="intent" to={`/users/${user.username}`}>
-							<Icon className="text-body-md" name="avatar">
-								Profile
-							</Icon>
+		<div className="border-2 border-red-500">
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button asChild variant="secondary">
+						<Link
+							to={`/users/${user.username}`}
+							// this is for progressive enhancement
+							onClick={(e) => e.preventDefault()}
+							className="flex items-center gap-2"
+						>
+							<img
+								className="h-8 w-8 rounded-full object-cover"
+								alt={user.name ?? user.username}
+								src={getUserImgSrc(user.image?.id)}
+							/>
+							<span className="text-body-sm font-bold">
+								{user.name ?? user.username}
+							</span>
 						</Link>
-					</DropdownMenuItem>
-					<DropdownMenuItem asChild>
-						<Link prefetch="intent" to={`/users/${user.username}/notes`}>
-							<Icon className="text-body-md" name="pencil-2">
-								Notes
-							</Icon>
-						</Link>
-					</DropdownMenuItem>
-					<Form action="/logout" method="POST" ref={formRef}>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuPortal>
+					<DropdownMenuContent sideOffset={8} align="end">
+						<DropdownMenuItem asChild>
+							<Link prefetch="intent" to={`/users/${user.username}`}>
+								<Icon className="text-body-md" name="avatar">
+									Profile
+								</Icon>
+							</Link>
+						</DropdownMenuItem>
 						<DropdownMenuItem asChild>
-							<button type="submit" className="w-full">
-								<Icon className="text-body-md" name="exit">
-									Logout
+							<Link prefetch="intent" to={`/users/${user.username}/notes`}>
+								<Icon className="text-body-md" name="pencil-2">
+									Notes
 								</Icon>
-							</button>
+							</Link>
 						</DropdownMenuItem>
-					</Form>
-				</DropdownMenuContent>
-			</DropdownMenuPortal>
-		</DropdownMenu>
+						<Form action="/logout" method="POST" ref={formRef}>
+							<DropdownMenuItem asChild>
+								<button type="submit" className="w-full">
+									<Icon className="text-body-md" name="exit">
+										Logout
+									</Icon>
+								</button>
+							</DropdownMenuItem>
+						</Form>
+					</DropdownMenuContent>
+				</DropdownMenuPortal>
+			</DropdownMenu>
+		</div>
 	)
 }
diff --git a/examples/federation/epic-stack-remote/rsbuild.config.ts b/examples/federation/epic-stack-remote/rsbuild.config.ts
@@ -27,6 +27,12 @@ const sharedDependencies = {
 	'react-dom/': {
 		singleton: true,
 	},
+	"@prisma/client": {
+		singleton: true,
+	},
+	"remix-utils/": {
+		singleton: true,
+	}
 }
 
 // Common exposed components
@@ -52,8 +58,15 @@ const exposedComponents = {
 	'./components/ui/checkbox': './app/components/ui/checkbox',
 	"./utils/connections": "./app/utils/connections",
 	"./utils/misc": "./app/utils/misc",
+	"./routes/login": "./app/routes/_auth+/login?react-router-route",
+	"./routes/login.server": "./app/routes/_auth+/login.server"
 }
 
+// Filter out .server exposes for web environment
+const webExposedComponents = Object.fromEntries(
+	Object.entries(exposedComponents).filter(([_, value]) => !value.includes('.server'))
+)
+
 // Common Module Federation configuration
 const commonFederationConfig = {
 	name: 'remote',
@@ -69,6 +82,7 @@ const webFederationConfig = {
 	library: {
 		type: 'module'
 	},
+	exposes: webExposedComponents
 }
 
 // Node-specific federation config
diff --git a/examples/federation/epic-stack/app/routes/_auth+/login.server.ts b/examples/federation/epic-stack/app/routes/_auth+/login.server.ts
diff --git a/examples/federation/epic-stack/app/routes/_auth+/login.tsx b/examples/federation/epic-stack/app/routes/_auth+/login.tsx
diff --git a/examples/federation/epic-stack/app/routes/_auth+/verify.server.ts b/examples/federation/epic-stack/app/routes/_auth+/verify.server.ts
diff --git a/examples/federation/epic-stack/rsbuild.config.ts b/examples/federation/epic-stack/rsbuild.config.ts
diff --git a/setup-federation.sh b/setup-federation.sh

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ function EpicProgress() {`
`32`	`32`	`role="progressbar"`
`33`	`33`	`aria-hidden={delayedPending ? undefined : true}`
`34`	`34`	`aria-valuetext={delayedPending ? 'Loading' : undefined}`
`35`		`- className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"`
	`35`	`+ className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse border-2 border-red-500"`
`36`	`36`	`>`
`37`	`37`	`<div`
`38`	`38`	`ref={ref}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export function SearchBar({`
`31`	`31`	`<Form`
`32`	`32`	`method="GET"`
`33`	`33`	`action="/users"`
`34`		`- className="flex flex-wrap items-center justify-center gap-2"`
	`34`	`+ className="flex flex-wrap items-center justify-center gap-2 border-2 border-red-500"`
`35`	`35`	`onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}`
`36`	`36`	`>`
`37`	`37`	`<div className="flex-1">`
Original file line number	Diff line number	Diff line change
`@@ -53,5 +53,5 @@ export function Spacer({`
`53`	`53`	`'4xl': 'h-44',`
`54`	`54`	`}`
`55`	`55`	`const className = options[size]`
`56`		`- return <div className={className} />`
	`56`	`+ return <div className={className + " border-2 border-red-500"} />`
`57`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import * as React from 'react'`
`5`	`5`	`import { cn } from '#app/utils/misc.tsx'`
`6`	`6`
`7`	`7`	`const buttonVariants = cva(`
`8`		`- 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',`
	`8`	`+ 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-2 border-red-500',`
`9`	`9`	`{`
`10`	`10`	`variants: {`
`11`	`11`	`variant: {`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ const DropdownMenuShortcut = ({`
`180`	`180`	`}: React.HTMLAttributes<HTMLSpanElement>) => {`
`181`	`181`	`return (`
`182`	`182`	`<span`
`183`		`- className={cn('ml-auto text-xs tracking-widest opacity-60', className)}`
	`183`	`+ className={cn('ml-auto text-xs tracking-widest opacity-60 border-2 border-red-500', className)}`
`184`	`184`	`{...props}`
`185`	`185`	`/>`
`186`	`186`	`)`