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

[desiprisg]

Description

Add a dev mode notice to our components to avoid going to prod with dev keys on accident.

Checklist

• [x] npm test runs as expected.
• [x] 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
• [x] 🌟 New feature
• [ ] 🔨 Breaking change
• [ ] 📖 Refactoring / dependency upgrade / documentation
• [ ] other:

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 79dd3a94489e090d1c63578ec470d0b293584751

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

[desiprisg]

!preview

[clerk-cookie]

Hey @octoper, your preview is available.

Status	Preview	Updated (UTC)
:cookie: Deployed	Visit preview	Jul 31, 2024 10:09 AM

[desiprisg]

!preview

[anagstef]

@desiprisg can we have a screenshot of how this looks like?

[desiprisg]

@desiprisg can we have a screenshot of how this looks like?

Adding these! Feel free to check the preview deployment as well!

[nikosdouvlis]

Hey @desiprisg , whats the status of this one?

[desiprisg]

Hey @desiprisg , whats the status of this one?

We were waiting for user button / org switcher designs before merging this one.

[octoper]

!preview

[nikosdouvlis]

@octoper hey :) is this good to go? if not, do you need help with anything at this point?

[octoper]

There were no designs for <OrgSwitcher/> and <UserButton/> until yesterday, I will take a look at this today

[octoper]

!preview

[octoper]

!preview

[kylemac]

@octoper do we offer the ability for a developer to turn this off in Dev?

[octoper]

!preview

[octoper]

!preview

[octoper]

!preview

[octoper]

!preview

[anagstef]

!snapshot

[clerk-cookie]

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

Package	Version
@clerk/astro	0.0.3-snapshot.v2af7822
@clerk/backend	1.3.2-snapshot.v2af7822
@clerk/chrome-extension	1.1.4-snapshot.v2af7822
@clerk/clerk-js	5.9.0-snapshot.v2af7822
@clerk/elements	0.10.3-snapshot.v2af7822
@clerk/clerk-expo	1.2.7-snapshot.v2af7822
@clerk/express	0.0.17-snapshot.v2af7822
@clerk/fastify	1.0.19-snapshot.v2af7822
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/localizations	2.4.8-snapshot.v2af7822
@clerk/nextjs	5.2.4-snapshot.v2af7822
@clerk/clerk-react	5.2.8-snapshot.v2af7822
@clerk/remix	4.2.3-snapshot.v2af7822
@clerk/clerk-sdk-node	5.0.16-snapshot.v2af7822
@clerk/shared	2.3.3-snapshot.v2af7822
@clerk/tanstack-start	0.1.7-snapshot.v2af7822
@clerk/testing	1.1.11-snapshot.v2af7822
@clerk/themes	2.1.12-snapshot.v2af7822
@clerk/types	4.8.0-snapshot.v2af7822

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

gatsby-plugin-clerk

npm i [email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

[PixelJanitor]

!preview

[nikosdouvlis]

!preview

[nikosdouvlis]

@PixelJanitor something's up with the GH comments, but here's your preview link: https://javascript-preview-3511.clerkpreview.com/

[alexcarpenter]

@nikosdouvlis @PixelJanitor needs to ensure his Clerk membership status is set to public for !preview and !snapshot comments to function https://github.com/clerk/javascript/blob/main/docs/PUBLISH.md#previewing-prs

[nikosdouvlis]

@alexcarpenter that's true, but the comment is missing even though the action I triggered was completed successfully: https://github.com/clerk/javascript/actions/runs/10171336607/job/28132106414

[octoper]

@nikosdouvlis @alexcarpenter The comment is only posted once and gets updated when !preview deployment is done, also the URL of the preview remains the same

[octoper]

!preview