feat: audience mdx component (#1630)

packages/ui/app/src/mdx/components/Audience/Audience.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren, ReactNode } from "react";
+import { useFernUser } from "../../../atoms";
+
+export interface AudienceProps {
+    /**
+     * The audience to check against
+     */
+    audience?: string | string[];
+
+    /**
+     * Invert the audience check
+     */
+    not?: boolean;
+}
+
+export function Audience({ not, audience, children }: PropsWithChildren<AudienceProps>): ReactNode {
+    const user = useFernUser();
+
+    if (audience == null || (Array.isArray(audience) && audience.length === 0)) {
+        return children;
+    }
+
+    const audienceArr = Array.isArray(audience) ? audience : [audience];
+    const userAudienceArr =
+        user?.audience == null ? [] : Array.isArray(user.audience) ? user.audience : [user.audience];
+
+    const show = audienceArr.some((aud) => userAudienceArr.includes(aud));
+
+    return not ? !show && children : show && children;
+}

packages/ui/app/src/mdx/components/Audience/index.ts

@@ -0,0 +1 @@
+export * from "./Audience";

packages/ui/app/src/mdx/components/index.tsx

@@ -3,6 +3,7 @@ import type { MDXComponents } from "mdx/types";
 import dynamic from "next/dynamic";
 import { ComponentProps, PropsWithChildren, ReactElement } from "react";
 import { FernErrorBoundaryProps, FernErrorTag } from "../../components/FernErrorBoundary";
+import { Audience } from "./Audience";
 import { AccordionGroup } from "./accordion";
 import { Availability } from "./availability";
 import { Badge } from "./badge";
@@ -39,6 +40,7 @@ const LaunchDarkly = dynamic(() => import("./launchdarkly/LaunchDarkly").then((m
 
 const FERN_COMPONENTS = {
     AccordionGroup,
+    Audience,
     Availability,
     Badge,
     Bleed,

packages/ui/fern-docs-auth/src/types.ts

@@ -3,6 +3,12 @@ import { z } from "zod";
 export const FernUserSchema = z.object({
     name: z.string().optional(),
     email: z.string().optional(),
+    audience: z
+        .union([z.string(), z.array(z.string())], {
+            description:
+                "The audience of the token (can be a string or an array of strings) which limits what content users can access",
+        })
+        .optional(),
 });
 
 export type FernUser = z.infer<typeof FernUserSchema>;