feat(astro): Introduce <Waitlist /> component

Author: nikospapcom

.changeset/empty-roses-peel.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Introduce `<Waitlist />` component for Astro

packages/astro/src/astro-components/index.ts

@@ -24,3 +24,4 @@ export { OrganizationProfile } from './interactive/OrganizationProfile';
 export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
+export { default as Waitlist } from './interactive/Waitlist.astro';

packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

@@ -1,13 +1,22 @@
 ---
 interface Props {
-  [key: string]: unknown
-  id?: string
-  component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
+  [key: string]: unknown;
+  id?: string;
+  component:
+    | 'sign-in'
+    | 'sign-up'
+    | 'organization-list'
+    | 'organization-profile'
+    | 'organization-switcher'
+    | 'user-button'
+    | 'user-profile'
+    | 'google-one-tap'
+    | 'waitlist';
 }
 
 import { generateSafeId } from '@clerk/astro/internal';
 
-const { component, id, ...props } = Astro.props
+const { component, id, ...props } = Astro.props;
 
 const safeId = id || generateSafeId();
 ---

packages/astro/src/astro-components/interactive/Waitlist.astro

@@ -0,0 +1,8 @@
+---
+import type { WaitlistProps } from "@clerk/types";
+type Props = WaitlistProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="waitlist" />

packages/astro/src/internal/mount-clerk-astro-js-components.ts

@@ -13,6 +13,7 @@ const mountAllClerkAstroJSComponents = () => {
     'sign-in': 'mountSignIn',
     'sign-up': 'mountSignUp',
     'google-one-tap': 'openGoogleOneTap',
+    waitlist: 'mountWaitlist',
   } as const;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

packages/astro/src/react/uiComponents.tsx

@@ -7,6 +7,7 @@ import type {
   SignUpProps,
   UserButtonProps,
   UserProfileProps,
+  WaitlistProps,
 } from '@clerk/types';
 import React from 'react';
 
@@ -174,3 +175,13 @@ export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<Google
     />
   );
 }, 'GoogleOneTap');
+
+export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp<WaitlistProps>) => {
+  return (
+    <Portal
+      mount={clerk?.mountWaitlist}
+      unmount={clerk?.unmountWaitlist}
+      props={props}
+    />
+  );
+}, 'Waitlist');