Skip to content

Commit 0286966

Browse files
joe-bellalexcarpenter
joe-bell
and
alexcarpenter
authored
feat(ui): Development mode banner (clerk#3731)
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>
1 parent c633f07 commit 0286966

7 files changed

Lines changed: 69 additions & 12 deletions

File tree

‎.changeset/spotty-pens-cry.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { UsernameField } from '~/common/username-field';
1515
import { useAttributes } from '~/hooks/use-attributes';
1616
import { useDisplayConfig } from '~/hooks/use-display-config';
1717
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
18+
import { useEnvironment } from '~/hooks/use-environment';
1819
import { useLocalizations } from '~/hooks/use-localizations';
1920
import { Alert } from '~/primitives/alert';
2021
import { Button } from '~/primitives/button';
@@ -36,6 +37,7 @@ export function SignInComponentLoaded() {
3637
const clerk = useClerk();
3738
const locationBasedCountryIso = (clerk as any)?.__internal_country;
3839
const enabledConnections = useEnabledConnections();
40+
const { isDevelopmentOrStaging } = useEnvironment();
3941
const { t } = useLocalizations();
4042
const { enabled: usernameEnabled } = useAttributes('username');
4143
const { enabled: phoneNumberEnabled } = useAttributes('phone_number');
@@ -45,6 +47,7 @@ export function SignInComponentLoaded() {
4547

4648
const hasConnection = enabledConnections.length > 0;
4749
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
50+
const isDev = isDevelopmentOrStaging();
4851

4952
return (
5053
<Common.Loading>
@@ -171,6 +174,7 @@ export function SignInComponentLoaded() {
171174
) : null
172175
}
173176
</Card.Body>
177+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
174178
</Card.Content>
175179

176180
<Card.Footer branded={branded}>
@@ -456,6 +460,7 @@ export function SignInComponentLoaded() {
456460
</Common.Loading>
457461
</Card.Body>
458462
</SignIn.Strategy>
463+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
459464
</Card.Content>
460465
<Card.Footer branded={branded} />
461466
</Card.Root>
@@ -509,6 +514,7 @@ export function SignInComponentLoaded() {
509514
<LinkButton>{t('backButton')}</LinkButton>
510515
</SignIn.Action>
511516
</Card.Body>
517+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
512518
</Card.Content>
513519
<Card.Footer branded={branded}>
514520
<Card.FooterAction>
@@ -588,6 +594,7 @@ export function SignInComponentLoaded() {
588594
</SignIn.Action>
589595
</div>
590596
</Card.Body>
597+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
591598
</Card.Content>
592599
<Card.Footer branded={branded}>
593600
<Card.FooterAction>
@@ -658,6 +665,7 @@ export function SignInComponentLoaded() {
658665
</Common.Loading>
659666
</div>
660667
</Card.Body>
668+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
661669
</Card.Content>
662670
<Card.Footer branded={branded} />
663671
</Card.Root>

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { UsernameField } from '~/common/username-field';
1313
import { useAttributes } from '~/hooks/use-attributes';
1414
import { useDisplayConfig } from '~/hooks/use-display-config';
1515
import { useEnabledConnections } from '~/hooks/use-enabled-connections';
16+
import { useEnvironment } from '~/hooks/use-environment';
1617
import { useLocalizations } from '~/hooks/use-localizations';
1718
import { Alert } from '~/primitives/alert';
1819
import { Button } from '~/primitives/button';
@@ -34,6 +35,7 @@ export function SignUpComponent() {
3435
function SignUpComponentLoaded() {
3536
const clerk = useClerk();
3637
const enabledConnections = useEnabledConnections();
38+
const { isDevelopmentOrStaging } = useEnvironment();
3739
const locationBasedCountryIso = (clerk as any)?.__internal_country;
3840
const { t } = useLocalizations();
3941
const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
@@ -46,6 +48,7 @@ function SignUpComponentLoaded() {
4648

4749
const hasConnection = enabledConnections.length > 0;
4850
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
51+
const isDev = isDevelopmentOrStaging();
4952

5053
return (
5154
<Common.Loading>
@@ -153,6 +156,7 @@ function SignUpComponentLoaded() {
153156
</Common.Loading>
154157
) : null}
155158
</Card.Body>
159+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
156160
</Card.Content>
157161
<Card.Footer branded={branded}>
158162
<Card.FooterAction>
@@ -353,6 +357,7 @@ function SignUpComponentLoaded() {
353357
</SignUp.Action>
354358
</Card.Body>
355359
</SignUp.Strategy>
360+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
356361
</Card.Content>
357362
<Card.Footer branded={branded} />
358363
</Card.Root>
@@ -438,6 +443,7 @@ function SignUpComponentLoaded() {
438443
}}
439444
</Common.Loading>
440445
</Card.Body>
446+
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
441447
</Card.Content>
442448
<Card.Footer branded={branded}>
443449
<Card.FooterAction>

‎packages/ui/src/hooks/use-attributes.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { useClerk } from '@clerk/clerk-react';
2-
import type { Attribute, AttributeData, EnvironmentResource } from '@clerk/types';
1+
import type { Attribute, AttributeData } from '@clerk/types';
2+
3+
import { useEnvironment } from './use-environment';
34

45
export function useAttributes(attribute: Attribute): AttributeData {
5-
const clerk = useClerk();
6-
const userSettingsAttributes = ((clerk as any)?.__unstable__environment as EnvironmentResource)?.userSettings
7-
.attributes;
6+
const environment = useEnvironment();
7+
8+
const userSettingsAttributes = environment.userSettings.attributes;
9+
810
return userSettingsAttributes[attribute];
911
}

‎packages/ui/src/hooks/use-environment.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { useClerk } from '@clerk/clerk-react';
2+
import type { EnvironmentResource } from '@clerk/types';
3+
4+
export function useEnvironment() {
5+
const clerk = useClerk();
6+
return (clerk as any)?.__unstable__environment as EnvironmentResource;
7+
}

‎packages/ui/src/primitives/card.tsx‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import * as React from 'react';
33

44
import { ClerkLogo } from './clerk-logo';
55

6-
export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function Root(
7-
{ children, className, ...props },
8-
forwardedRef,
6+
export const Root = React.forwardRef(function CardRoot(
7+
{ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>,
8+
forwardedRef: React.ForwardedRef<HTMLDivElement>,
99
) {
1010
return (
1111
<div
1212
ref={forwardedRef}
1313
{...props}
1414
className={cx(
15+
'[--card-body-padding:theme(spacing.10)]',
1516
'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
1617
className,
1718
)}
@@ -30,7 +31,7 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
3031
ref={forwardedRef}
3132
{...props}
3233
className={cx(
33-
'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',
34+
'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',
3435
className,
3536
)}
3637
>
@@ -47,7 +48,7 @@ export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
4748
<div
4849
ref={forwardedRef}
4950
{...props}
50-
className={cx('flex flex-col gap-1 text-center', className)}
51+
className={cx('z-1 flex flex-col gap-1 text-center', className)}
5152
>
5253
{children}
5354
</div>
@@ -73,7 +74,7 @@ export const Logo = React.forwardRef(function Logo(
7374
/>
7475
);
7576
return (
76-
<div className='mb-4 flex justify-center'>
77+
<div className='z-1 mb-4 flex justify-center'>
7778
{href ? (
7879
<a
7980
href={href}
@@ -125,13 +126,41 @@ export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
125126
<div
126127
ref={forwardedRef}
127128
{...props}
128-
className={cx('flex flex-col gap-6 rounded-lg', className)}
129+
className={cx('z-1 flex flex-col gap-6 rounded-lg', className)}
129130
>
130131
{children}
131132
</div>
132133
);
133134
});
134135

136+
export const Banner = React.forwardRef(function CardBanner(
137+
{ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>,
138+
forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
139+
) {
140+
return (
141+
<div className={cx('absolute inset-0 isolate')}>
142+
<div
143+
className={cx(
144+
'pointer-events-none absolute inset-0 w-full',
145+
// manually nudge the radius by `1px` for a snug fit
146+
'rounded-b-[calc(theme(borderRadius.xl)-0.0625rem)]',
147+
'[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)]',
148+
'[mask-image:linear-gradient(to_top,_black,transparent_8rem)]',
149+
)}
150+
/>
151+
<div className='absolute inset-x-0 bottom-0 z-10 flex h-[--card-body-padding] w-full items-center justify-center'>
152+
<p
153+
ref={forwardedRef}
154+
className={cx('text-sm font-medium text-orange-500', className)}
155+
{...props}
156+
>
157+
{children}
158+
</p>
159+
</div>
160+
</div>
161+
);
162+
});
163+
135164
export const Footer = React.forwardRef(function Footer(
136165
{ branded = true, children, className, ...props }: { branded?: boolean } & React.HTMLAttributes<HTMLDivElement>,
137166
forwardedRef: React.ForwardedRef<HTMLDivElement>,

‎packages/ui/src/tailwind.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ const config = {
7070
spacing: {
7171
...generateSpaceScale(),
7272
},
73+
zIndex: {
74+
1: '1',
75+
},
7376
colors: {
7477
accent: {
7578
...generateColorScale('accent'),

0 commit comments

Comments
 (0)