Skip to content

Commit a6e46ac

Browse files
desiprisgdesiprisg
committed
feat(clerk-js): Add dev mode notice to components
1 parent a087f59 commit a6e46ac

File tree

7 files changed

+129
-43
lines changed

7 files changed

+129
-43
lines changed

‎.changeset/hungry-clouds-return.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
---
4+
5+
Add a dev mode notice to components.

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

Lines changed: 51 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,69 @@
11
import React from 'react';
22

33
import { useEnvironment } from '../../contexts';
4-
import { Flex, Icon, Link, Text } from '../../customizables';
4+
import { Col, Flex, Icon, Link, Text } from '../../customizables';
55
import { LogoMark } from '../../icons';
66
import type { PropsOfComponent } from '../../styledSystem';
7+
import { DevModeNotice } from '../DevModeNotice';
78
import { Card } from '.';
89

910
export const CardClerkAndPagesTag = React.memo(
10-
React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex> & { withFooterPages?: boolean }>((props, ref) => {
11-
const { sx, withFooterPages = false, ...rest } = props;
12-
const { branded } = useEnvironment().displayConfig;
11+
React.forwardRef<
12+
HTMLDivElement,
13+
PropsOfComponent<typeof Flex> & { withFooterPages?: boolean; withDevModeNotice?: boolean }
14+
>((props, ref) => {
15+
const { sx, withFooterPages = false, withDevModeNotice = false, ...rest } = props;
16+
const { displayConfig } = useEnvironment();
1317

14-
if (!(branded || withFooterPages)) {
18+
if (!(displayConfig.branded || withFooterPages)) {
1519
return null;
1620
}
1721

1822
return (
19-
<Flex
20-
sx={[
21-
t => ({
22-
':has(div:only-child)': {
23-
justifyContent: 'center',
24-
},
25-
justifyContent: 'space-between',
26-
width: '100%',
27-
padding: `0 ${t.space.$8}`,
28-
}),
29-
sx,
30-
]}
31-
{...rest}
32-
ref={ref}
23+
<Col
24+
sx={t => ({
25+
gap: t.space.$2,
26+
marginLeft: 'auto',
27+
marginRight: 'auto',
28+
width: '100%',
29+
justifyContent: 'center',
30+
alignItems: 'center',
31+
})}
3332
>
34-
{branded && (
35-
<Flex
36-
gap={1}
37-
align='center'
38-
justify='center'
39-
sx={t => ({ color: t.colors.$colorTextSecondary })}
40-
>
41-
<>
42-
<Text variant='buttonSmall'>Secured by</Text>
43-
<LogoMarkIconLink />
44-
</>
45-
</Flex>
46-
)}
33+
<Flex
34+
sx={[
35+
t => ({
36+
':has(div:only-child)': {
37+
justifyContent: 'center',
38+
},
39+
justifyContent: 'space-between',
40+
width: '100%',
41+
padding: `0 ${t.space.$8}`,
42+
}),
43+
sx,
44+
]}
45+
{...rest}
46+
ref={ref}
47+
>
48+
{displayConfig.branded && (
49+
<Flex
50+
gap={1}
51+
align='center'
52+
justify='center'
53+
sx={t => ({ color: t.colors.$colorTextSecondary })}
54+
>
55+
<>
56+
<Text variant='buttonSmall'>Secured by</Text>
57+
<LogoMarkIconLink />
58+
</>
59+
</Flex>
60+
)}
61+
62+
{withFooterPages && <Card.FooterLinks />}
63+
</Flex>
4764

48-
{withFooterPages && <Card.FooterLinks />}
49-
</Flex>
65+
{withDevModeNotice && <DevModeNotice />}
66+
</Col>
5067
);
5168
}),
5269
);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { Close } from '../../icons';
1313
import { type PropsOfComponent } from '../../styledSystem';
1414
import { useCardState, useFlowMetadata } from '../contexts';
15+
import { DevModeNotice, DevModeOverlay } from '../DevModeNotice';
1516
import { IconButton } from '../IconButton';
1617
import { useUnsafeModalContext } from '../Modal';
1718
import { CardAlert } from './CardAlert';
@@ -53,6 +54,8 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
5354
ref={ref}
5455
{...rest}
5556
>
57+
<DevModeOverlay />
58+
5659
{toggle && (
5760
<IconButton
5861
elementDescriptor={descriptors.modalCloseButton}
@@ -79,6 +82,16 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
7982
<CardAlert variant={'warning'}>{t(localizationKeys('maintenanceMode'))}</CardAlert>
8083
)}
8184
{children}
85+
86+
<DevModeNotice
87+
sx={{
88+
position: 'absolute',
89+
bottom: 0,
90+
left: 0,
91+
right: 0,
92+
textAlign: 'center',
93+
}}
94+
/>
8295
</Flex>
8396
);
8497
});

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import type { ThemableCssProp } from 'ui/styledSystem';
2+
3+
import { useEnvironment } from '../contexts';
4+
import { Box, Text } from '../customizables';
5+
6+
export const DevModeOverlay = () => {
7+
const { isDevelopmentOrStaging } = useEnvironment();
8+
9+
if (!isDevelopmentOrStaging()) {
10+
return null;
11+
}
12+
13+
return (
14+
<Box
15+
sx={t => ({
16+
userSelect: 'none',
17+
pointerEvents: 'none',
18+
inset: 0,
19+
position: 'absolute',
20+
background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
21+
maskImage: 'linear-gradient(transparent 60%, black)',
22+
})}
23+
/>
24+
);
25+
};
26+
27+
type DevModeNoticeProps = { sx?: ThemableCssProp };
28+
export const DevModeNotice = (props: DevModeNoticeProps) => {
29+
const { sx } = props;
30+
const { isDevelopmentOrStaging } = useEnvironment();
31+
32+
if (!isDevelopmentOrStaging()) {
33+
return null;
34+
}
35+
36+
return (
37+
<Text
38+
sx={[
39+
t => ({
40+
color: t.colors.$warning500,
41+
fontWeight: t.fontWeights.$semibold,
42+
whiteSpace: 'nowrap',
43+
padding: t.space.$1x5,
44+
}),
45+
sx,
46+
]}
47+
>
48+
Development mode
49+
</Text>
50+
);
51+
};

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { animations, common, mqu } from '../styledSystem';
1212
import { colors } from '../utils';
1313
import { Card } from './Card';
1414
import { withFloatingTree } from './contexts';
15+
import { DevModeOverlay } from './DevModeNotice';
1516
import { Popover } from './Popover';
1617

1718
type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
@@ -140,6 +141,7 @@ const NavbarContainer = (
140141
},
141142
flex: `0 0 ${t.space.$57}`,
142143
width: t.sizes.$57,
144+
position: 'relative',
143145
maxWidth: t.space.$57,
144146
background: common.mergedColorsBackground(
145147
colors.setAlpha(t.colors.$colorBackground, 1),
@@ -151,6 +153,8 @@ const NavbarContainer = (
151153
justifyContent: 'space-between',
152154
})}
153155
>
156+
<DevModeOverlay />
157+
154158
<Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
155159
<Col
156160
sx={t => ({
@@ -172,10 +176,10 @@ const NavbarContainer = (
172176
</Col>
173177

174178
<Card.ClerkAndPagesTag
175-
sx={theme => ({
179+
sx={{
176180
width: 'fit-content',
177-
paddingLeft: theme.space.$3,
178-
})}
181+
}}
182+
withDevModeNotice
179183
/>
180184
</Col>
181185
);

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
8989
>
9090
{children}
9191

92-
{shouldShowTagOrLinks && (
93-
<Card.ClerkAndPagesTag
94-
withFooterPages
95-
sx={t => ({ padding: `${t.space.$4} ${t.space.$8}` })}
96-
/>
97-
)}
92+
{shouldShowTagOrLinks && <Card.ClerkAndPagesTag withFooterPages />}
9893
</Col>
9994
);
10095
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,4 @@ export * from './Card';
5555
export * from './ProfileCard';
5656
export * from './Gauge';
5757
export * from './Animated';
58+
export * from './DevModeNotice';

0 commit comments

Comments
 (0)