feat(ui,shared): Export useOrganizationCreationDefaults hook (#7694)

Author: LauraBeatris

.changeset/thick-hoops-film.md

@@ -0,0 +1,11 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/chrome-extension': minor
+'@clerk/react-router': minor
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+'@clerk/react': minor
+'@clerk/ui': minor
+---
+
+Export `useOrganizationCreationDefaults` hook to fetch suggested organization name and logo from default naming rules

packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -35,6 +35,7 @@ exports[`public exports > should not include a breaking change 1`] = `
   "useClerk",
   "useEmailLink",
   "useOrganization",
+  "useOrganizationCreationDefaults",
   "useOrganizationList",
   "useReverification",
   "useSession",

packages/chrome-extension/src/react/re-exports.ts

@@ -30,6 +30,7 @@ export {
   useClerk,
   useEmailLink,
   useOrganization,
+  useOrganizationCreationDefaults,
   useOrganizationList,
   useReverification,
   useSession,

packages/nextjs/src/client-boundary/hooks.ts

@@ -6,6 +6,7 @@ export {
   useEmailLink,
   useOrganization,
   useOrganizationList,
+  useOrganizationCreationDefaults,
   useSession,
   useSessionList,
   useSignIn,

packages/nextjs/src/index.ts

@@ -52,6 +52,7 @@ export {
   useClerk,
   useEmailLink,
   useOrganization,
+  useOrganizationCreationDefaults,
   useOrganizationList,
   useReverification,
   useSession,

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -59,6 +59,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "useClerk",
   "useEmailLink",
   "useOrganization",
+  "useOrganizationCreationDefaults",
   "useOrganizationList",
   "useReverification",
   "useSession",

packages/react/src/hooks/index.ts

@@ -4,6 +4,7 @@ export { useSignIn, useSignUp, useWaitlist } from './useClerkSignal';
 export {
   useClerk,
   useOrganization,
+  useOrganizationCreationDefaults,
   useOrganizationList,
   useSessionList,
   useUser,

packages/shared/src/react/hooks/index.ts

@@ -1,6 +1,11 @@
 export { assertContextExists, createContextAndHook } from './createContextAndHook';
 export { useAPIKeys as __experimental_useAPIKeys } from './useAPIKeys';
 export { useOrganization } from './useOrganization';
+export { useOrganizationCreationDefaults } from './useOrganizationCreationDefaults';
+export type {
+  UseOrganizationCreationDefaultsParams,
+  UseOrganizationCreationDefaultsReturn,
+} from './useOrganizationCreationDefaults.types';
 export { useOrganizationList } from './useOrganizationList';
 export { useAttemptToEnableOrganizations } from './useAttemptToEnableOrganizations';
 export { useSafeLayoutEffect } from './useSafeLayoutEffect';

packages/shared/src/react/hooks/useOrganizationCreationDefaults.shared.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+import { STABLE_KEYS } from '../stable-keys';
+import { createCacheKeys } from './createCacheKeys';
+
+export function useOrganizationCreationDefaultsCacheKeys(params: { userId: string | null }) {
+  const { userId } = params;
+  return useMemo(() => {
+    return createCacheKeys({
+      stablePrefix: STABLE_KEYS.ORGANIZATION_CREATION_DEFAULTS_KEY,
+      authenticated: Boolean(userId),
+      tracked: {
+        userId: userId ?? null,
+      },
+      untracked: {
+        args: {},
+      },
+    });
+  }, [userId]);
+}

packages/shared/src/react/hooks/useOrganizationCreationDefaults.tsx

@@ -0,0 +1,70 @@
+import { eventMethodCalled } from '../../telemetry/events/method-called';
+import type { EnvironmentResource } from '../../types/environment';
+import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
+import { useClerkQuery } from '../clerk-rq/useQuery';
+import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContext } from '../contexts';
+import { useOrganizationCreationDefaultsCacheKeys } from './useOrganizationCreationDefaults.shared';
+import type {
+  UseOrganizationCreationDefaultsParams,
+  UseOrganizationCreationDefaultsReturn,
+} from './useOrganizationCreationDefaults.types';
+
+const HOOK_NAME = 'useOrganizationCreationDefaults';
+
+/**
+ * The `useOrganizationCreationDefaults()` hook retrieves the organization creation defaults for the current user.
+ *
+ * @example
+ * ### Basic usage
+ *
+ * ```tsx
+ * import { useOrganizationCreationDefaults } from '@clerk/clerk-react'
+ *
+ * export default function CreateOrganizationForm() {
+ *   const { data, isLoading } = useOrganizationCreationDefaults()
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *
+ *   return (
+ *     <form>
+ *       <input defaultValue={data?.form.name} placeholder="Organization name" />
+ *       <input defaultValue={data?.form.slug} placeholder="Slug" />
+ *       <button type="submit">Create</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+export function useOrganizationCreationDefaults(
+  params: UseOrganizationCreationDefaultsParams = {},
+): UseOrganizationCreationDefaultsReturn {
+  useAssertWrappedByClerkProvider(HOOK_NAME);
+
+  const { keepPreviousData = true, enabled = true } = params;
+  const clerk = useClerkInstanceContext();
+  const user = useUserContext();
+
+  // @ts-expect-error `__internal_environment` is not typed
+  const environment = clerk.__internal_environment as unknown as EnvironmentResource | null | undefined;
+  const featureEnabled = environment?.organizationSettings?.organizationCreationDefaults?.enabled ?? false;
+
+  clerk.telemetry?.record(eventMethodCalled(HOOK_NAME));
+
+  const { queryKey } = useOrganizationCreationDefaultsCacheKeys({ userId: user?.id ?? null });
+
+  const queryEnabled = Boolean(user) && enabled && featureEnabled && clerk.loaded;
+
+  const query = useClerkQuery({
+    queryKey,
+    queryFn: user?.getOrganizationCreationDefaults,
+    enabled: queryEnabled,
+    placeholderData: defineKeepPreviousDataFn(keepPreviousData),
+  });
+
+  return {
+    data: query.data,
+    error: (query.error ?? null) as UseOrganizationCreationDefaultsReturn['error'],
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+  };
+}