feat(ui): Development mode banner (#3731)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Jul 16, 2024 · 0286966 · 0286966
1 parent c633f07
commit 0286966
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 12 deletions.
diff --git a/.changeset/spotty-pens-cry.md b/.changeset/spotty-pens-cry.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -15,6 +15,7 @@ import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
+import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Alert } from '~/primitives/alert';
 import { Button } from '~/primitives/button';
@@ -36,6 +37,7 @@ export function SignInComponentLoaded() {
   const clerk = useClerk();
   const locationBasedCountryIso = (clerk as any)?.__internal_country;
   const enabledConnections = useEnabledConnections();
+  const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
   const { enabled: usernameEnabled } = useAttributes('username');
   const { enabled: phoneNumberEnabled } = useAttributes('phone_number');
@@ -45,6 +47,7 @@ export function SignInComponentLoaded() {
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
+  const isDev = isDevelopmentOrStaging();
 
   return (
     <Common.Loading>
@@ -171,6 +174,7 @@ export function SignInComponentLoaded() {
                       ) : null
                     }
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
 
                 <Card.Footer branded={branded}>
@@ -456,6 +460,7 @@ export function SignInComponentLoaded() {
                       </Common.Loading>
                     </Card.Body>
                   </SignIn.Strategy>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded} />
               </Card.Root>
@@ -509,6 +514,7 @@ export function SignInComponentLoaded() {
                       <LinkButton>{t('backButton')}</LinkButton>
                     </SignIn.Action>
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded}>
                   <Card.FooterAction>
@@ -588,6 +594,7 @@ export function SignInComponentLoaded() {
                       </SignIn.Action>
                     </div>
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded}>
                   <Card.FooterAction>
@@ -658,6 +665,7 @@ export function SignInComponentLoaded() {
                       </Common.Loading>
                     </div>
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded} />
               </Card.Root>

diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -13,6 +13,7 @@ import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
+import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Alert } from '~/primitives/alert';
 import { Button } from '~/primitives/button';
@@ -34,6 +35,7 @@ export function SignUpComponent() {
 function SignUpComponentLoaded() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
+  const { isDevelopmentOrStaging } = useEnvironment();
   const locationBasedCountryIso = (clerk as any)?.__internal_country;
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
@@ -46,6 +48,7 @@ function SignUpComponentLoaded() {
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
+  const isDev = isDevelopmentOrStaging();
 
   return (
     <Common.Loading>
@@ -153,6 +156,7 @@ function SignUpComponentLoaded() {
                       </Common.Loading>
                     ) : null}
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded}>
                   <Card.FooterAction>
@@ -353,6 +357,7 @@ function SignUpComponentLoaded() {
                       </SignUp.Action>
                     </Card.Body>
                   </SignUp.Strategy>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded} />
               </Card.Root>
@@ -438,6 +443,7 @@ function SignUpComponentLoaded() {
                       }}
                     </Common.Loading>
                   </Card.Body>
+                  {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
                 </Card.Content>
                 <Card.Footer branded={branded}>
                   <Card.FooterAction>

diff --git a/packages/ui/src/hooks/use-attributes.ts b/packages/ui/src/hooks/use-attributes.ts
@@ -1,9 +1,11 @@
-import { useClerk } from '@clerk/clerk-react';
-import type { Attribute, AttributeData, EnvironmentResource } from '@clerk/types';
+import type { Attribute, AttributeData } from '@clerk/types';
+
+import { useEnvironment } from './use-environment';
 
 export function useAttributes(attribute: Attribute): AttributeData {
-  const clerk = useClerk();
-  const userSettingsAttributes = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.userSettings
-    .attributes;
+  const environment = useEnvironment();
+
+  const userSettingsAttributes = environment.userSettings.attributes;
+
   return userSettingsAttributes[attribute];
 }
diff --git a/packages/ui/src/hooks/use-environment.ts b/packages/ui/src/hooks/use-environment.ts
@@ -0,0 +1,7 @@
+import { useClerk } from '@clerk/clerk-react';
+import type { EnvironmentResource } from '@clerk/types';
+
+export function useEnvironment() {
+  const clerk = useClerk();
+  return (clerk as any)?.__unstable__environment as EnvironmentResource;
+}
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
@@ -3,15 +3,16 @@ import * as React from 'react';
 
 import { ClerkLogo } from './clerk-logo';
 
-export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function Root(
-  { children, className, ...props },
-  forwardedRef,
+export const Root = React.forwardRef(function CardRoot(
+  { children, className, ...props }: React.HTMLAttributes<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
     <div
       ref={forwardedRef}
       {...props}
       className={cx(
+        '[--card-body-padding:theme(spacing.10)]',
         'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
         className,
       )}
@@ -30,7 +31,7 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
       ref={forwardedRef}
       {...props}
       className={cx(
-        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -mx-px -mt-px flex flex-col gap-8 rounded-[inherit] border px-10 py-8 shadow-sm',
+        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] border p-[--card-body-padding] shadow-sm',
         className,
       )}
     >
@@ -47,7 +48,7 @@ export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
     <div
       ref={forwardedRef}
       {...props}
-      className={cx('flex flex-col gap-1 text-center', className)}
+      className={cx('z-1 flex flex-col gap-1 text-center', className)}
     >
       {children}
     </div>
@@ -73,7 +74,7 @@ export const Logo = React.forwardRef(function Logo(
     />
   );
   return (
-    <div className='mb-4 flex justify-center'>
+    <div className='z-1 mb-4 flex justify-center'>
       {href ? (
         <a
           href={href}
@@ -125,13 +126,41 @@ export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={forwardedRef}
       {...props}
-      className={cx('flex flex-col gap-6 rounded-lg', className)}
+      className={cx('z-1 flex flex-col gap-6 rounded-lg', className)}
     >
       {children}
     </div>
   );
 });
 
+export const Banner = React.forwardRef(function CardBanner(
+  { children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>,
+  forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
+) {
+  return (
+    <div className={cx('absolute inset-0 isolate')}>
+      <div
+        className={cx(
+          'pointer-events-none absolute inset-0 w-full',
+          // manually nudge the radius by `1px` for a snug fit
+          'rounded-b-[calc(theme(borderRadius.xl)-0.0625rem)]',
+          '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),_theme(colors.orange.50)_6px,_theme(colors.orange.100/0.75)_6px,_theme(colors.orange.100/0.75)_12px)]',
+          '[mask-image:linear-gradient(to_top,_black,transparent_8rem)]',
+        )}
+      />
+      <div className='absolute inset-x-0 bottom-0 z-10 flex h-[--card-body-padding] w-full items-center justify-center'>
+        <p
+          ref={forwardedRef}
+          className={cx('text-sm font-medium text-orange-500', className)}
+          {...props}
+        >
+          {children}
+        </p>
+      </div>
+    </div>
+  );
+});
+
 export const Footer = React.forwardRef(function Footer(
   { branded = true, children, className, ...props }: { branded?: boolean } & React.HTMLAttributes<HTMLDivElement>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,

diff --git a/packages/ui/src/tailwind.config.ts b/packages/ui/src/tailwind.config.ts
@@ -70,6 +70,9 @@ const config = {
       spacing: {
         ...generateSpaceScale(),
       },
+      zIndex: {
+        1: '1',
+      },
       colors: {
         accent: {
           ...generateColorScale('accent'),