feat(clerk-js): Add dev mode notice to components

Author: desiprisg

.changeset/hungry-clouds-return.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add a dev mode notice to components.

packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx

@@ -1,52 +1,69 @@
 import React from 'react';
 
 import { useEnvironment } from '../../contexts';
-import { Flex, Icon, Link, Text } from '../../customizables';
+import { Col, Flex, Icon, Link, Text } from '../../customizables';
 import { LogoMark } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
+import { DevModeNotice } from '../DevModeNotice';
 import { Card } from '.';
 
 export const CardClerkAndPagesTag = React.memo(
-  React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex> & { withFooterPages?: boolean }>((props, ref) => {
-    const { sx, withFooterPages = false, ...rest } = props;
-    const { branded } = useEnvironment().displayConfig;
+  React.forwardRef<
+    HTMLDivElement,
+    PropsOfComponent<typeof Flex> & { withFooterPages?: boolean; withDevModeNotice?: boolean }
+  >((props, ref) => {
+    const { sx, withFooterPages = false, withDevModeNotice = false, ...rest } = props;
+    const { displayConfig } = useEnvironment();
 
-    if (!(branded || withFooterPages)) {
+    if (!(displayConfig.branded || withFooterPages)) {
       return null;
     }
 
     return (
-      <Flex
-        sx={[
-          t => ({
-            ':has(div:only-child)': {
-              justifyContent: 'center',
-            },
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: `0 ${t.space.$8}`,
-          }),
-          sx,
-        ]}
-        {...rest}
-        ref={ref}
+      <Col
+        sx={t => ({
+          gap: t.space.$2,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
       >
-        {branded && (
-          <Flex
-            gap={1}
-            align='center'
-            justify='center'
-            sx={t => ({ color: t.colors.$colorTextSecondary })}
-          >
-            <>
-              <Text variant='buttonSmall'>Secured by</Text>
-              <LogoMarkIconLink />
-            </>
-          </Flex>
-        )}
+        <Flex
+          sx={[
+            t => ({
+              ':has(div:only-child)': {
+                justifyContent: 'center',
+              },
+              justifyContent: 'space-between',
+              width: '100%',
+              padding: `0 ${t.space.$8}`,
+            }),
+            sx,
+          ]}
+          {...rest}
+          ref={ref}
+        >
+          {displayConfig.branded && (
+            <Flex
+              gap={1}
+              align='center'
+              justify='center'
+              sx={t => ({ color: t.colors.$colorTextSecondary })}
+            >
+              <>
+                <Text variant='buttonSmall'>Secured by</Text>
+                <LogoMarkIconLink />
+              </>
+            </Flex>
+          )}
+
+          {withFooterPages && <Card.FooterLinks />}
+        </Flex>
 
-        {withFooterPages && <Card.FooterLinks />}
-      </Flex>
+        {withDevModeNotice && <DevModeNotice />}
+      </Col>
     );
   }),
 );

packages/clerk-js/src/ui/elements/Card/CardContent.tsx

@@ -12,6 +12,7 @@ import {
 import { Close } from '../../icons';
 import { type PropsOfComponent } from '../../styledSystem';
 import { useCardState, useFlowMetadata } from '../contexts';
+import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
 import { IconButton } from '../IconButton';
 import { useUnsafeModalContext } from '../Modal';
 import { CardAlert } from './CardAlert';
@@ -53,6 +54,8 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       ref={ref}
       {...rest}
     >
+      <DevModeOverlay />
+
       {toggle && (
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
@@ -79,6 +82,16 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
         <CardAlert variant={'warning'}>{t(localizationKeys('maintenanceMode'))}</CardAlert>
       )}
       {children}
+
+      <DevModeNotice
+        sx={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          textAlign: 'center',
+        }}
+      />
     </Flex>
   );
 });

packages/clerk-js/src/ui/elements/DevModeNotice.tsx

@@ -0,0 +1,51 @@
+import type { ThemableCssProp } from 'ui/styledSystem';
+
+import { useEnvironment } from '../contexts';
+import { Box, Text } from '../customizables';
+
+export const DevModeOverlay = () => {
+  const { isDevelopmentOrStaging } = useEnvironment();
+
+  if (!isDevelopmentOrStaging()) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={t => ({
+        userSelect: 'none',
+        pointerEvents: 'none',
+        inset: 0,
+        position: 'absolute',
+        background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
+        maskImage: 'linear-gradient(transparent 60%, black)',
+      })}
+    />
+  );
+};
+
+type DevModeNoticeProps = { sx?: ThemableCssProp };
+export const DevModeNotice = (props: DevModeNoticeProps) => {
+  const { sx } = props;
+  const { isDevelopmentOrStaging } = useEnvironment();
+
+  if (!isDevelopmentOrStaging()) {
+    return null;
+  }
+
+  return (
+    <Text
+      sx={[
+        t => ({
+          color: t.colors.$warning500,
+          fontWeight: t.fontWeights.$semibold,
+          whiteSpace: 'nowrap',
+          padding: t.space.$1x5,
+        }),
+        sx,
+      ]}
+    >
+      Development mode
+    </Text>
+  );
+};

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -12,6 +12,7 @@ import { animations, common, mqu } from '../styledSystem';
 import { colors } from '../utils';
 import { Card } from './Card';
 import { withFloatingTree } from './contexts';
+import { DevModeOverlay } from './DevModeNotice';
 import { Popover } from './Popover';
 
 type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
@@ -140,6 +141,7 @@ const NavbarContainer = (
         },
         flex: `0 0 ${t.space.$57}`,
         width: t.sizes.$57,
+        position: 'relative',
         maxWidth: t.space.$57,
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
@@ -151,6 +153,8 @@ const NavbarContainer = (
         justifyContent: 'space-between',
       })}
     >
+      <DevModeOverlay />
+
       <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
         <Col
           sx={t => ({
@@ -172,10 +176,10 @@ const NavbarContainer = (
       </Col>
 
       <Card.ClerkAndPagesTag
-        sx={theme => ({
+        sx={{
           width: 'fit-content',
-          paddingLeft: theme.space.$3,
-        })}
+        }}
+        withDevModeNotice
       />
     </Col>
   );

packages/clerk-js/src/ui/elements/PopoverCard.tsx

@@ -89,12 +89,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
     >
       {children}
 
-      {shouldShowTagOrLinks && (
-        <Card.ClerkAndPagesTag
-          withFooterPages
-          sx={t => ({ padding: `${t.space.$4} ${t.space.$8}` })}
-        />
-      )}
+      {shouldShowTagOrLinks && <Card.ClerkAndPagesTag withFooterPages />}
     </Col>
   );
 };

packages/clerk-js/src/ui/elements/index.ts

@@ -55,3 +55,4 @@ export * from './Card';
 export * from './ProfileCard';
 export * from './Gauge';
 export * from './Animated';
+export * from './DevModeNotice';