chore(clerk-js,elements,shared): Move iconImageUrl util to shared p…

…ackage (#4188)
clerk · Sep 19, 2024 · f9faaf0 · f9faaf0
1 parent 8ef124e
commit f9faaf0
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 23 deletions.
diff --git a/.changeset/tricky-poems-yell.md b/.changeset/tricky-poems-yell.md
@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/elements": patch
+"@clerk/shared": patch
+---
+
+Internal change to move `iconImageUrl` util to `shared` package.
diff --git a/packages/clerk-js/src/ui/common/constants.ts b/packages/clerk-js/src/ui/common/constants.ts
@@ -101,11 +101,3 @@ export const WEB3_PROVIDERS: Web3Providers = Object.freeze({
 export function getWeb3ProviderData(name: Web3Provider): Web3ProviderData | undefined | null {
   return WEB3_PROVIDERS[name];
 }
-
-/**
- * Returns the URL for a static SVG image
- * using the new img.clerk.com service
- */
-export function iconImageUrl(id: string): string {
-  return `https://img.clerk.com/static/${id}.svg`;
-}
diff --git a/packages/clerk-js/src/ui/elements/IdentityPreview.tsx b/packages/clerk-js/src/ui/elements/IdentityPreview.tsx
@@ -1,3 +1,4 @@
+import { iconImageUrl } from '@clerk/shared/constants';
 import React from 'react';
 
 import { Button, descriptors, Flex, Icon, Text } from '../customizables';
@@ -12,7 +13,7 @@ type IdentityPreviewProps = {
 } & PropsOfComponent<typeof Flex>;
 
 export const IdentityPreview = (props: IdentityPreviewProps) => {
-  const { avatarUrl = 'https://img.clerk.com/static/avatar_placeholder.jpeg', identifier, onClick, ...rest } = props;
+  const { avatarUrl = iconImageUrl('avatar_placeholder', 'jpeg'), identifier, onClick, ...rest } = props;
   const refs = React.useRef({ avatarUrl, identifier: formatSafeIdentifier(identifier) });
 
   const edit = onClick && (

diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
@@ -1,8 +1,8 @@
+import { iconImageUrl } from '@clerk/shared/constants';
 import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
 // TODO: This import shouldn't be part of @clerk/types
 import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types';
 
-import { iconImageUrl } from '../common/constants';
 import { useEnvironment } from '../contexts/EnvironmentContext';
 import { fromEntries } from '../utils';
 

diff --git a/packages/clerk-js/src/ui/hooks/useSaml.ts b/packages/clerk-js/src/ui/hooks/useSaml.ts
@@ -1,8 +1,7 @@
+import { iconImageUrl } from '@clerk/shared/constants';
 import type { SamlIdpSlug } from '@clerk/types';
 import { SAML_IDPS } from '@clerk/types';
 
-import { iconImageUrl } from '../common/constants';
-
 function getSamlProviderLogoUrl(provider: SamlIdpSlug = 'saml_custom'): string {
   return iconImageUrl(SAML_IDPS[provider]?.logo);
 }

diff --git a/packages/elements/src/utils/clerk-js.ts b/packages/elements/src/utils/clerk-js.ts
@@ -5,13 +5,3 @@ export const fromEntries = (iterable: Iterable<any>) => {
     return obj;
   }, {});
 };
-
-/**
- * Returns the URL for a static SVG image
- * using the new img.clerk.com service
- *
- * Pulled from `clerk-js/src/ui/common/constants.ts`
- */
-export function iconImageUrl(id: string): string {
-  return `https://img.clerk.com/static/${id}.svg`;
-}
diff --git a/packages/elements/src/utils/third-party-strategies.ts b/packages/elements/src/utils/third-party-strategies.ts
@@ -1,5 +1,6 @@
 // c.f. vendor/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx [Modified]
 
+import { iconImageUrl } from '@clerk/shared/constants';
 import type {
   EnvironmentResource,
   OAuthProvider,
@@ -10,7 +11,7 @@ import type {
 } from '@clerk/types';
 import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types'; // TODO: This import shouldn't be part of @clerk/types
 
-import { fromEntries, iconImageUrl } from './clerk-js';
+import { fromEntries } from './clerk-js';
 
 export type ThirdPartyStrategy =
   | {

diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
@@ -16,3 +16,11 @@ export const STAGING_ENV_SUFFIXES = ['.accountsstage.dev'];
 export const LOCAL_API_URL = 'https://api.lclclerk.com';
 export const STAGING_API_URL = 'https://api.clerkstage.dev';
 export const PROD_API_URL = 'https://api.clerk.com';
+
+/**
+ * Returns the URL for a static image
+ * using the new img.clerk.com service
+ */
+export function iconImageUrl(id: string, format: 'svg' | 'jpeg' = 'svg'): string {
+  return `https://img.clerk.com/static/${id}.${format}`;
+}