feat(clerk-js): Add dev mode warning to components (#3511)

[octoper]

Description

Adding a development mode warning to our components to avoid going to productions with development keys by accident.

To be able to disable the development mode warning in order to preview how the components will look like in production the appearance.layout.unsafe_disableDevelopmentModeWarnings key has been added.

Example usage:

Globally using the <ClerkProvider />:

<ClerkProvider appearance={{
 layout: {
   unsafe_disableDevelopmentModeWarnings: true,
  }
}}>
...
</ClerkProvider>

On each component:

<UserProfile appearance={{
 layout: {
   unsafe_disableDevelopmentModeWarnings: true,
  }
}} />

Original PR: #3511

Screenshots

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 109b698

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/astro	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[octoper]

!preview

[clerk-cookie]

Hey @octoper, your preview is available.

Status	Preview	Updated (UTC)
🍪 Deployed	Visit preview	Aug 01, 2024 08:20 PM

[thiskevinwang]

👍

[octoper]

!preview

[octoper]

!snapshot

[clerk-cookie]

Hey @octoper - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.0.5-snapshot.v741fdbd
@clerk/backend	1.5.0-snapshot.v741fdbd
@clerk/chrome-extension	1.1.8-snapshot.v741fdbd
@clerk/clerk-js	5.11.0-snapshot.v741fdbd
@clerk/elements	0.11.0-snapshot.v741fdbd
@clerk/clerk-expo	2.0.1-snapshot.v741fdbd
@clerk/express	0.0.22-snapshot.v741fdbd
@clerk/fastify	1.0.24-snapshot.v741fdbd
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/localizations	2.5.3-snapshot.v741fdbd
@clerk/nextjs	5.2.9-snapshot.v741fdbd
@clerk/clerk-react	5.3.0-snapshot.v741fdbd
@clerk/remix	4.2.8-snapshot.v741fdbd
@clerk/clerk-sdk-node	5.0.21-snapshot.v741fdbd
@clerk/shared	2.4.2-snapshot.v741fdbd
@clerk/tanstack-start	0.1.12-snapshot.v741fdbd
@clerk/testing	1.2.4-snapshot.v741fdbd
@clerk/themes	2.1.15-snapshot.v741fdbd
@clerk/types	4.10.0-snapshot.v741fdbd

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.0.5-snapshot.v741fdbd --save-exact

@clerk/backend

npm i @clerk/backend@1.5.0-snapshot.v741fdbd --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.8-snapshot.v741fdbd --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.11.0-snapshot.v741fdbd --save-exact

@clerk/elements

npm i @clerk/elements@0.11.0-snapshot.v741fdbd --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.0.1-snapshot.v741fdbd --save-exact

@clerk/express

npm i @clerk/express@0.0.22-snapshot.v741fdbd --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.24-snapshot.v741fdbd --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/localizations

npm i @clerk/localizations@2.5.3-snapshot.v741fdbd --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.9-snapshot.v741fdbd --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.3.0-snapshot.v741fdbd --save-exact

@clerk/remix

npm i @clerk/remix@4.2.8-snapshot.v741fdbd --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.21-snapshot.v741fdbd --save-exact

@clerk/shared

npm i @clerk/shared@2.4.2-snapshot.v741fdbd --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.12-snapshot.v741fdbd --save-exact

@clerk/testing

npm i @clerk/testing@1.2.4-snapshot.v741fdbd --save-exact

@clerk/themes

npm i @clerk/themes@2.1.15-snapshot.v741fdbd --save-exact

@clerk/types

npm i @clerk/types@4.10.0-snapshot.v741fdbd --save-exact