feat(ui): Add useDevModeWarning hook

.changeset/lemon-ways-search.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/components/sign-up/steps/continue.tsx

@@ -9,24 +9,22 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
-import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
 
 export function SignUpContinue() {
-  const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
-
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeWarning = useDevModeWarning();
 
   return (
     <Common.Loading scope='global'>
@@ -111,7 +109,7 @@ export function SignUpContinue() {
                     );
                   }}
                 </Common.Loading>
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeWarning ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded}>
                 <Card.FooterAction>

packages/ui/src/components/sign-up/steps/start.tsx

@@ -12,6 +12,7 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useEnvironment } from '~/hooks/use-environment';
@@ -24,7 +25,7 @@ import { Separator } from '~/primitives/separator';
 export function SignUpStart() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
-  const { isDevelopmentOrStaging, userSettings } = useEnvironment();
+  const { userSettings } = useEnvironment();
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
@@ -36,7 +37,8 @@ export function SignUpStart() {
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeWarning = useDevModeWarning();
+
   return (
     <Common.Loading scope='global'>
       {isGlobalLoading => {
@@ -144,7 +146,7 @@ export function SignUpStart() {
                     }}
                   </Common.Loading>
                 ) : null}
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeWarning ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded}>
                 <Card.FooterAction>

packages/ui/src/components/sign-up/steps/verifications.tsx

@@ -5,8 +5,8 @@ import * as SignUp from '@clerk/elements/sign-up';
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { parsePhoneString } from '~/common/phone-number-field/utils';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
-import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -43,11 +43,10 @@ function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
   ============================================ */
 
 export function SignUpVerifications() {
-  const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeNotice = useDevModeWarning();
 
   return (
     <Common.Loading scope='global'>
@@ -271,7 +270,7 @@ export function SignUpVerifications() {
                     </SignUp.Action>
                   </Card.Body>
                 </SignUp.Strategy>
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeNotice ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded} />
             </Card.Root>

packages/ui/src/hooks/use-appearance.ts

@@ -0,0 +1,8 @@
+import type { Appearance } from '@clerk/types';
+
+import { useOptions } from './use-options';
+
+export function useAppearance() {
+  const { appearance } = useOptions();
+  return (appearance as Appearance) || {};
+}

packages/ui/src/hooks/use-dev-mode-warning.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+
+import { useAppearance } from './use-appearance';
+import { useEnvironment } from './use-environment';
+
+export function useDevModeWarning() {
+  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+  const isDevelopment = isDevelopmentOrStaging();
+  const { layout } = useAppearance();
+  const unsafeDisabled = layout?.unsafe_disableDevelopmentModeWarnings || false;
+  const developmentUiDisabled = isDevelopment && unsafeDisabled;
+  const showDevModeWarning = useMemo(
+    () => !developmentUiDisabled && displayConfig.showDevModeWarning,
+    [developmentUiDisabled, displayConfig],
+  );
+  return showDevModeWarning;
+}