From f9faaf03100baf679c78e6c24877fbf3b60be529 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 19 Sep 2024 10:56:55 -0400 Subject: [PATCH] chore(clerk-js,elements,shared): Move `iconImageUrl` util to shared package (#4188) --- .changeset/tricky-poems-yell.md | 7 +++++++ packages/clerk-js/src/ui/common/constants.ts | 8 -------- packages/clerk-js/src/ui/elements/IdentityPreview.tsx | 3 ++- .../src/ui/hooks/useEnabledThirdPartyProviders.tsx | 2 +- packages/clerk-js/src/ui/hooks/useSaml.ts | 3 +-- packages/elements/src/utils/clerk-js.ts | 10 ---------- packages/elements/src/utils/third-party-strategies.ts | 3 ++- packages/shared/src/constants.ts | 8 ++++++++ 8 files changed, 21 insertions(+), 23 deletions(-) create mode 100644 .changeset/tricky-poems-yell.md diff --git a/.changeset/tricky-poems-yell.md b/.changeset/tricky-poems-yell.md new file mode 100644 index 0000000000..9bfcfb5599 --- /dev/null +++ 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 index 535c3f3e1c..792a541203 100644 --- 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 index 7b8120b486..126a2b3a80 100644 --- 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; 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 index 753a23d045..3734d54732 100644 --- 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 index 5e350b9b23..b5fb5aac1c 100644 --- 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 index 43cf61317a..010067aad1 100644 --- 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) => { 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 index 0653e03137..c46bd33cf5 100644 --- 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 index bf3fc97840..bfe137c005 100644 --- 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}`; +}