diff --git a/eslint.config.mjs b/eslint.config.mjs index a311e9e2ca6..c935b457ae7 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -442,7 +442,7 @@ export default tseslint.config([ { definedTags: ['inline', 'unionReturnHeadings', 'displayFunctionSignature', 'paramExtension'], typed: false }, ], 'jsdoc/require-hyphen-before-param-description': 'warn', - 'jsdoc/require-description': 'warn', + 'jsdoc/require-description': 'off', 'jsdoc/require-description-complete-sentence': 'warn', 'jsdoc/require-param': ['warn', { ignoreWhenAllParamsMissing: true }], 'jsdoc/require-param-description': 'warn', @@ -455,6 +455,16 @@ export default tseslint.config([ ], }, }, + { + name: 'repo/jsdoc-internal', + files: ['packages/shared/src/**/internal/**/*.{ts,tsx}', 'packages/shared/src/**/*.{ts,tsx}'], + plugins: { + jsdoc: pluginJsDoc, + }, + rules: { + 'jsdoc/require-jsdoc': 'off', + }, + }, ...pluginYml.configs['flat/recommended'], { name: 'eslint-prettier', diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 1096be1155f..78a4381c420 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -32,7 +32,6 @@ ], "scripts": { "build": "pnpm build:bundle && pnpm build:declarations", - "postbuild": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs", "build:analyze": "rspack build --config rspack.config.js --env production --env variant=\"clerk.browser\" --env analysis --analyze", "build:bundle": "pnpm clean && rspack build --config rspack.config.js --env production", "build:declarations": "tsc -p tsconfig.declarations.json", @@ -52,6 +51,7 @@ "lint": "eslint src", "lint:attw": "attw --pack . --profile node16 --ignore-rules named-exports", "lint:publint": "publint || true", + "postbuild:disabled": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs", "test": "vitest --watch=false", "test:sandbox:integration": "playwright test", "test:sandbox:integration:ui": "playwright test --ui", @@ -61,26 +61,18 @@ "browserslist": "last 2 years", "dependencies": { "@base-org/account": "2.0.1", - "@clerk/localizations": "workspace:^", "@clerk/shared": "workspace:^", + "@clerk/ui": "workspace:^", "@coinbase/wallet-sdk": "4.3.0", - "@emotion/cache": "11.11.0", - "@emotion/react": "11.11.1", - "@floating-ui/react": "0.27.12", - "@floating-ui/react-dom": "^2.1.3", - "@formkit/auto-animate": "^0.8.2", "@stripe/stripe-js": "5.6.0", "@swc/helpers": "^0.5.17", "@zxcvbn-ts/core": "3.0.4", "@zxcvbn-ts/language-common": "3.0.4", "alien-signals": "2.0.6", "browser-tabs-lock": "1.3.0", - "copy-to-clipboard": "3.3.3", "core-js": "3.41.0", "crypto-js": "^4.2.0", "dequal": "2.0.3", - "input-otp": "1.4.2", - "qrcode.react": "4.2.0", "regenerator-runtime": "0.14.1", "swr": "2.3.4" }, @@ -99,10 +91,6 @@ "minimatch": "^10.0.3", "webpack-merge": "^5.10.0" }, - "peerDependencies": { - "react": "catalog:peer-react", - "react-dom": "catalog:peer-react" - }, "engines": { "node": ">=18.17.0" }, diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js index 76c48d467cc..b5a11797505 100644 --- a/packages/clerk-js/rspack.config.js +++ b/packages/clerk-js/rspack.config.js @@ -5,6 +5,7 @@ const path = require('path'); const { merge } = require('webpack-merge'); const ReactRefreshPlugin = require('@rspack/plugin-react-refresh'); const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin'); +const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common'); const isProduction = mode => mode === 'production'; const isDevelopment = mode => !isProduction(mode); @@ -117,20 +118,6 @@ const common = ({ mode, variant, disableRHC = false }) => { chunks: 'all', enforce: true, }, - /** - * Sign up is shared between the SignUp component and the SignIn component. - */ - signUp: { - minChunks: 1, - name: 'signup', - test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')), - }, - common: { - minChunks: 1, - name: 'ui-common', - priority: -20, - test: module => !!(module.resource && !module.resource.includes('/ui/components')), - }, defaultVendors: { minChunks: 1, test: /[\\/]node_modules[\\/]/, @@ -152,116 +139,6 @@ const common = ({ mode, variant, disableRHC = false }) => { }; }; -/** @type { () => (import('@rspack/core').RuleSetRule) } */ -const svgLoader = () => { - return { - test: /\.svg$/, - resolve: { - fullySpecified: false, - }, - use: { - loader: '@svgr/webpack', - options: { - svgo: true, - svgoConfig: { - floatPrecision: 3, - transformPrecision: 1, - plugins: ['preset-default', 'removeDimensions', 'removeStyleElement'], - }, - }, - }, - }; -}; - -/** @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').RuleSetRule[]) } */ -const typescriptLoaderProd = ( - { targets = packageJSON.browserslist, useCoreJs = false } = { targets: packageJSON.browserslist, useCoreJs: false }, -) => { - return [ - { - test: /\.(jsx?|tsx?)$/, - exclude: /node_modules/, - use: { - loader: 'builtin:swc-loader', - options: { - env: { - targets, - ...(useCoreJs - ? { - mode: 'usage', - coreJs: require('core-js/package.json').version, - } - : {}), - }, - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - }, - externalHelpers: true, - transform: { - react: { - runtime: 'automatic', - importSource: '@emotion/react', - development: false, - refresh: false, - }, - }, - }, - }, - }, - }, - { - test: /\.m?js$/, - exclude: /node_modules[\\/]core-js/, - use: { - loader: 'builtin:swc-loader', - options: { - env: { - targets, - ...(useCoreJs - ? { - mode: 'usage', - coreJs: '3.41.0', - } - : {}), - }, - isModule: 'unknown', - }, - }, - }, - ]; -}; - -/** @type { () => (import('@rspack/core').RuleSetRule[]) } */ -const typescriptLoaderDev = () => { - return [ - { - test: /\.(jsx?|tsx?)$/, - exclude: /node_modules/, - loader: 'builtin:swc-loader', - options: { - jsc: { - target: 'esnext', - parser: { - syntax: 'typescript', - tsx: true, - }, - externalHelpers: true, - transform: { - react: { - runtime: 'automatic', - importSource: '@emotion/react', - development: true, - refresh: true, - }, - }, - }, - }, - }, - ]; -}; - /** * Used for production builds that have dynamicly loaded chunks. * @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').Configuration) } @@ -613,7 +490,7 @@ const devConfig = ({ mode, env }) => { cache: true, experiments: { cache: { - type: 'persistent', + type: 'memory', }, }, }; diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts index 889cca10513..1f48f4e4ee0 100644 --- a/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts +++ b/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts @@ -1,15 +1,15 @@ import { createCookieHandler } from '@clerk/shared/cookie'; import { addYears } from '@clerk/shared/date'; +import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { inCrossOriginIframe } from '../../../../utils'; import { getCookieDomain } from '../../getCookieDomain'; import { getSecureAttribute } from '../../getSecureAttribute'; import { createClientUatCookie } from '../clientUat'; vi.mock('@clerk/shared/cookie'); vi.mock('@clerk/shared/date'); -vi.mock('../../../../utils'); +vi.mock('@clerk/shared/internal/clerk-js/runtime'); vi.mock('../../getCookieDomain'); vi.mock('../../getSecureAttribute'); diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts index 6248d78b9eb..d51bf732de9 100644 --- a/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts +++ b/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts @@ -1,14 +1,14 @@ import { createCookieHandler } from '@clerk/shared/cookie'; import { addYears } from '@clerk/shared/date'; +import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { inCrossOriginIframe } from '../../../../utils'; import { getSecureAttribute } from '../../getSecureAttribute'; import { createSessionCookie } from '../session'; vi.mock('@clerk/shared/cookie'); vi.mock('@clerk/shared/date'); -vi.mock('../../../../utils'); +vi.mock('@clerk/shared/internal/clerk-js/runtime'); vi.mock('../../getSecureAttribute'); describe('createSessionCookie', () => { diff --git a/packages/clerk-js/src/core/auth/cookies/clientUat.ts b/packages/clerk-js/src/core/auth/cookies/clientUat.ts index a6d11bdd5a7..20a620938b8 100644 --- a/packages/clerk-js/src/core/auth/cookies/clientUat.ts +++ b/packages/clerk-js/src/core/auth/cookies/clientUat.ts @@ -1,9 +1,9 @@ import { createCookieHandler } from '@clerk/shared/cookie'; import { addYears } from '@clerk/shared/date'; +import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime'; import { getSuffixedCookieName } from '@clerk/shared/keys'; import type { ClientResource } from '@clerk/shared/types'; -import { inCrossOriginIframe } from '../../../utils'; import { getCookieDomain } from '../getCookieDomain'; import { getSecureAttribute } from '../getSecureAttribute'; diff --git a/packages/clerk-js/src/core/auth/cookies/devBrowser.ts b/packages/clerk-js/src/core/auth/cookies/devBrowser.ts index 8d1e3475788..ab3f66eb6d4 100644 --- a/packages/clerk-js/src/core/auth/cookies/devBrowser.ts +++ b/packages/clerk-js/src/core/auth/cookies/devBrowser.ts @@ -1,9 +1,9 @@ import { createCookieHandler } from '@clerk/shared/cookie'; import { addYears } from '@clerk/shared/date'; import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser'; +import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime'; import { getSuffixedCookieName } from '@clerk/shared/keys'; -import { inCrossOriginIframe } from '../../../utils'; import { getSecureAttribute } from '../getSecureAttribute'; export type DevBrowserCookieHandler = { diff --git a/packages/clerk-js/src/core/auth/cookies/session.ts b/packages/clerk-js/src/core/auth/cookies/session.ts index 4651cda52ec..e4362a2522d 100644 --- a/packages/clerk-js/src/core/auth/cookies/session.ts +++ b/packages/clerk-js/src/core/auth/cookies/session.ts @@ -1,8 +1,8 @@ import { createCookieHandler } from '@clerk/shared/cookie'; import { addYears } from '@clerk/shared/date'; +import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime'; import { getSuffixedCookieName } from '@clerk/shared/keys'; -import { inCrossOriginIframe } from '../../../utils'; import { getSecureAttribute } from '../getSecureAttribute'; const SESSION_COOKIE_NAME = '__session'; diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index d3e74295a09..9decd77d93d 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -9,6 +9,30 @@ import { isClerkAPIResponseError, isClerkRuntimeError, } from '@clerk/shared/error'; +import { assertNoLegacyProp } from '@clerk/shared/internal/clerk-js/assertNoLegacyProp'; +import { + canViewOrManageAPIKeys, + disabledAllBillingFeatures, + disabledAPIKeysFeature, + disabledOrganizationsFeature, + isSignedInAndSingleSessionModeEnabled, + noOrganizationExists, + noUserExists, +} from '@clerk/shared/internal/clerk-js/componentGuards'; +import { + CLERK_SATELLITE_URL, + CLERK_SUFFIXED_COOKIES, + CLERK_SYNCED, + ERROR_CODES, +} from '@clerk/shared/internal/clerk-js/constants'; +import { RedirectUrls } from '@clerk/shared/internal/clerk-js/redirectUrls'; +import { + getTaskEndpoint, + navigateIfTaskExists, + warnMissingPendingTaskHandlers, +} from '@clerk/shared/internal/clerk-js/sessionTasks'; +import { warnings } from '@clerk/shared/internal/clerk-js/warnings'; +import { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate'; import { parsePublishableKey } from '@clerk/shared/keys'; import { logger } from '@clerk/shared/logger'; import { CLERK_NETLIFY_CACHE_BUST_PARAM } from '@clerk/shared/netlifyCacheHandler'; @@ -95,20 +119,34 @@ import type { import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url'; import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils'; +// TODO: Replace with proper type from @clerk/ui +type MountComponentRenderer = ( + clerk: any, + environment: any, + options: any, +) => { + ensureMounted: (options?: { preloadHint?: string }) => Promise<{ + mountImpersonationFab: () => void; + updateProps: (props: any) => void; + openModal: (name: string, props: any) => void; + closeModal: (name: string) => void; + openDrawer: (name: string, props: any) => void; + closeDrawer: (name: string) => void; + mountComponent: (config: any) => void; + unmountComponent: (config: any) => void; + prefetch: (name: string) => void; + }>; +}; + import { debugLogger, initDebugLogger } from '@/utils/debug'; -import type { MountComponentRenderer } from '../ui/Components'; import { ALLOWED_PROTOCOLS, buildURL, - canViewOrManageAPIKeys, completeSignUpFlow, createAllowedRedirectOrigins, createBeforeUnloadTracker, createPageLifecycle, - disabledAllBillingFeatures, - disabledAPIKeysFeature, - disabledOrganizationsFeature, errorThrower, generateSignatureWithBase, generateSignatureWithCoinbaseWallet, @@ -123,22 +161,14 @@ import { isError, isOrganizationId, isRedirectForFAPIInitiatedFlow, - isSignedInAndSingleSessionModeEnabled, - noOrganizationExists, - noUserExists, - processCssLayerNameExtraction, removeClerkQueryParam, requiresUserInput, stripOrigin, - windowNavigate, } from '../utils'; -import { assertNoLegacyProp } from '../utils/assertNoLegacyProp'; import { CLERK_ENVIRONMENT_STORAGE_ENTRY, SafeLocalStorage } from '../utils/localStorage'; import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback'; -import { RedirectUrls } from '../utils/redirectUrls'; import { AuthCookieService } from './auth/AuthCookieService'; import { CaptchaHeartbeat } from './auth/CaptchaHeartbeat'; -import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED, ERROR_CODES } from './constants'; import { clerkErrorInitFailed, clerkInvalidSignInUrlFormat, @@ -157,9 +187,7 @@ import { APIKeys } from './modules/apiKeys'; import { Billing } from './modules/billing'; import { createCheckoutInstance } from './modules/checkout/instance'; import { BaseResource, Client, Environment, Organization, Waitlist } from './resources/internal'; -import { getTaskEndpoint, navigateIfTaskExists, warnMissingPendingTaskHandlers } from './sessionTasks'; import { State } from './state'; -import { warnings } from './warnings'; type SetActiveHook = (intent?: 'sign-out') => void | Promise; @@ -2942,16 +2970,9 @@ export class Clerk implements ClerkInterface { }; #initOptions = (options?: ClerkOptions): ClerkOptions => { - const processedOptions = options ? { ...options } : {}; - - // Extract cssLayerName from baseTheme if present and move it to appearance level - if (processedOptions.appearance) { - processedOptions.appearance = processCssLayerNameExtraction(processedOptions.appearance); - } - return { ...defaultOptions, - ...processedOptions, + ...options, allowedRedirectOrigins: createAllowedRedirectOrigins( options?.allowedRedirectOrigins, this.frontendApi, diff --git a/packages/clerk-js/src/core/constants.ts b/packages/clerk-js/src/core/constants.ts index 98cd6bdcce9..43ee8e244f7 100644 --- a/packages/clerk-js/src/core/constants.ts +++ b/packages/clerk-js/src/core/constants.ts @@ -1,57 +1,6 @@ -import type { SignUpModes } from '@clerk/shared/types'; - -// TODO: Do we still have a use for this or can we simply preserve all params? -export const PRESERVED_QUERYSTRING_PARAMS = [ - 'redirect_url', - 'after_sign_in_url', - 'after_sign_up_url', - 'sign_in_force_redirect_url', - 'sign_in_fallback_redirect_url', - 'sign_up_force_redirect_url', - 'sign_up_fallback_redirect_url', -]; - -export const CLERK_MODAL_STATE = '__clerk_modal_state'; -export const CLERK_SYNCED = '__clerk_synced'; -export const CLERK_SUFFIXED_COOKIES = 'suffixed_cookies'; -export const CLERK_SATELLITE_URL = '__clerk_satellite_url'; -export const ERROR_CODES = { - FORM_IDENTIFIER_NOT_FOUND: 'form_identifier_not_found', - FORM_PASSWORD_INCORRECT: 'form_password_incorrect', - FORM_PASSWORD_PWNED: 'form_password_pwned', - INVALID_STRATEGY_FOR_USER: 'strategy_for_user_invalid', - NOT_ALLOWED_TO_SIGN_UP: 'not_allowed_to_sign_up', - OAUTH_ACCESS_DENIED: 'oauth_access_denied', - OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML: 'oauth_email_domain_reserved_by_saml', - NOT_ALLOWED_ACCESS: 'not_allowed_access', - SAML_USER_ATTRIBUTE_MISSING: 'saml_user_attribute_missing', - USER_LOCKED: 'user_locked', - EXTERNAL_ACCOUNT_NOT_FOUND: 'external_account_not_found', - SIGN_UP_MODE_RESTRICTED: 'sign_up_mode_restricted', - SIGN_UP_MODE_RESTRICTED_WAITLIST: 'sign_up_restricted_waitlist', - ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING: 'enterprise_sso_user_attribute_missing', - ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'enterprise_sso_email_address_domain_mismatch', - ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH: 'enterprise_sso_hosted_domain_mismatch', - SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'saml_email_address_domain_mismatch', - INVITATION_ACCOUNT_NOT_EXISTS: 'invitation_account_not_exists', - ORGANIZATION_MEMBERSHIP_QUOTA_EXCEEDED_FOR_SSO: 'organization_membership_quota_exceeded_for_sso', - CAPTCHA_INVALID: 'captcha_invalid', - FRAUD_DEVICE_BLOCKED: 'device_blocked', - FRAUD_ACTION_BLOCKED: 'action_blocked', - SIGNUP_RATE_LIMIT_EXCEEDED: 'signup_rate_limit_exceeded', - USER_BANNED: 'user_banned', -} as const; - -export const SIGN_IN_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username']; -export const SIGN_UP_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username', 'first_name', 'last_name']; - -export const DEBOUNCE_MS = 350; - -export const SIGN_UP_MODES = { - PUBLIC: 'public', - RESTRICTED: 'restricted', - WAITLIST: 'waitlist', -} satisfies Record; - -// This is the currently supported version of the Frontend API -export const SUPPORTED_FAPI_VERSION = '2025-04-10'; +/** + * Re-exporting constants from @clerk/shared to avoid refactoring all imports. + * The constants have been moved to @clerk/shared/internal/clerk-js/constants + * to make them available across all Clerk packages. + */ +export * from '@clerk/shared/internal/clerk-js/constants'; diff --git a/packages/clerk-js/src/core/errors.ts b/packages/clerk-js/src/core/errors.ts index 3a589781565..45005bff61e 100644 --- a/packages/clerk-js/src/core/errors.ts +++ b/packages/clerk-js/src/core/errors.ts @@ -1,129 +1 @@ -const errorPrefix = 'ClerkJS:'; - -/** - * Used to log a warning when a Clerk feature is used in an unsupported environment. - * (Development Only) - * This is a warning and not an error because the application will still work, but the feature will not be available. - * - * @param strategy The strategy that is not supported in the current environment. - * @returns void - */ -export function clerkUnsupportedEnvironmentWarning(strategy: string) { - console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`); -} - -export function clerkNetworkError(url: string, e: Error): never { - throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`); -} - -export function clerkErrorInitFailed(): never { - throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`); -} - -export function clerkErrorDevInitFailed(msg = ''): never { - throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`); -} - -export function clerkErrorPathRouterMissingPath(componentName: string): never { - throw new Error( - `${errorPrefix} Missing path option. The ${componentName} component was mounted with path routing so you need to specify the path where the component is mounted on e.g. path="/sign-in".`, - ); -} - -export function clerkCoreErrorContextProviderNotFound(providerName: string): never { - throw new Error(`${errorPrefix} You must wrap your application in a <${providerName}> component.`); -} - -export function clerkCoreErrorNoClerkSingleton(): never { - throw new Error(`${errorPrefix} Clerk is undefined`); -} - -export function clerkUIErrorDOMElementNotFound(): never { - throw new Error(`${errorPrefix} The target element is empty. Provide a valid DOM element.`); -} - -export function clerkMissingFapiClientInResources(): never { - throw new Error(`${errorPrefix} Missing FAPI client in resources.`); -} - -export function clerkOAuthCallbackDidNotCompleteSignInSignUp(type: 'sign in' | 'sign up'): never { - throw new Error( - `${errorPrefix} Something went wrong initializing Clerk during the ${type} flow. Please contact support.`, - ); -} - -export function clerkVerifyEmailAddressCalledBeforeCreate(type: 'SignIn' | 'SignUp'): never { - throw new Error(`${errorPrefix} You need to start a ${type} flow by calling ${type}.create() first.`); -} - -export function clerkInvalidStrategy(functionaName: string, strategy: string): never { - throw new Error(`${errorPrefix} Strategy "${strategy}" is not a valid strategy for ${functionaName}.`); -} - -export function clerkVerifyWeb3WalletCalledBeforeCreate(type: 'SignIn' | 'SignUp'): never { - throw new Error( - `${errorPrefix} You need to start a ${type} flow by calling ${type}.create({ identifier: 'your web3 wallet address' }) first`, - ); -} - -export function clerkVerifyPasskeyCalledBeforeCreate(): never { - throw new Error( - `${errorPrefix} You need to start a SignIn flow by calling SignIn.create({ strategy: 'passkey' }) first`, - ); -} - -export function clerkMissingOptionError(name = ''): never { - throw new Error(`${errorPrefix} Missing '${name}' option`); -} - -export function clerkInvalidFAPIResponse(status: string | null, supportEmail: string): never { - throw new Error( - `${errorPrefix} Response: ${status || 0} not supported yet.\nFor more information contact us at ${supportEmail}`, - ); -} - -export function clerkMissingDevBrowserJwt(): never { - throw new Error(`${errorPrefix} Missing dev browser jwt. Please contact support.`); -} - -export function clerkMissingProxyUrlAndDomain(): never { - throw new Error( - `${errorPrefix} Missing domain and proxyUrl. A satellite application needs to specify a domain or a proxyUrl.`, - ); -} - -export function clerkInvalidSignInUrlOrigin(): never { - throw new Error(`${errorPrefix} The signInUrl needs to be on a different origin than your satellite application.`); -} - -export function clerkInvalidSignInUrlFormat(): never { - throw new Error(`${errorPrefix} The signInUrl needs to have a absolute url format.`); -} - -export function clerkMissingSignInUrlAsSatellite(): never { - throw new Error( - `${errorPrefix} Missing signInUrl. A satellite application needs to specify the signInUrl for development instances.`, - ); -} - -export function clerkRedirectUrlIsMissingScheme(): never { - throw new Error(`${errorPrefix} Invalid redirect_url. A valid http or https url should be used for the redirection.`); -} - -export function clerkFailedToLoadThirdPartyScript(name?: string): never { - throw new Error(`${errorPrefix} Unable to retrieve a third party script${name ? ` ${name}` : ''}.`); -} - -export function clerkInvalidRoutingStrategy(strategy?: string): never { - throw new Error(`${errorPrefix} Invalid routing strategy, path cannot be used in tandem with ${strategy}.`); -} - -export function clerkUnsupportedReloadMethod(className: string): never { - throw new Error(`${errorPrefix} Calling ${className}.reload is not currently supported. Please contact support.`); -} - -export function clerkMissingWebAuthnPublicKeyOptions(name: 'create' | 'get'): never { - throw new Error( - `${errorPrefix} Missing publicKey. When calling 'navigator.credentials.${name}()' it is required to pass a publicKey object.`, - ); -} +export * from '@clerk/shared/internal/clerk-js/errors'; diff --git a/packages/clerk-js/src/core/fapiClient.ts b/packages/clerk-js/src/core/fapiClient.ts index 7d03e620c27..94060f9ebf6 100644 --- a/packages/clerk-js/src/core/fapiClient.ts +++ b/packages/clerk-js/src/core/fapiClient.ts @@ -1,16 +1,13 @@ import { isBrowserOnline } from '@clerk/shared/browser'; +import { buildEmailAddress as buildEmailAddressUtil } from '@clerk/shared/internal/clerk-js/email'; +import { stringifyQueryParams } from '@clerk/shared/internal/clerk-js/querystring'; import { retry } from '@clerk/shared/retry'; import type { ClerkAPIErrorJSON, ClientJSON, InstanceType } from '@clerk/shared/types'; import { camelToSnake } from '@clerk/shared/underscore'; import { debugLogger } from '@/utils/debug'; -import { - buildEmailAddress as buildEmailAddressUtil, - buildURL as buildUrlUtil, - filterUndefinedValues, - stringifyQueryParams, -} from '../utils'; +import { buildURL as buildUrlUtil, filterUndefinedValues } from '../utils'; import { SUPPORTED_FAPI_VERSION } from './constants'; import { clerkNetworkError } from './errors'; diff --git a/packages/clerk-js/src/core/resources/Passkey.ts b/packages/clerk-js/src/core/resources/Passkey.ts index ea415f635c5..b073e1f4b4c 100644 --- a/packages/clerk-js/src/core/resources/Passkey.ts +++ b/packages/clerk-js/src/core/resources/Passkey.ts @@ -18,7 +18,7 @@ import { unixEpochToDate } from '../../utils/date'; import { serializePublicKeyCredential, webAuthnCreateCredential as webAuthnCreateCredentialOnWindow, -} from '../../utils/passkeys'; +} from '@clerk/shared/internal/clerk-js/passkeys'; import { clerkMissingWebAuthnPublicKeyOptions } from '../errors'; import { BaseResource, DeletedObject, PasskeyVerification } from './internal'; diff --git a/packages/clerk-js/src/core/resources/Session.ts b/packages/clerk-js/src/core/resources/Session.ts index b774b12730f..c6e78e1887b 100644 --- a/packages/clerk-js/src/core/resources/Session.ts +++ b/packages/clerk-js/src/core/resources/Session.ts @@ -32,7 +32,7 @@ import { convertJSONToPublicKeyRequestOptions, serializePublicKeyCredentialAssertion, webAuthnGetCredential as webAuthnGetCredentialOnWindow, -} from '@/utils/passkeys'; +} from '@clerk/shared/internal/clerk-js/passkeys'; import { TokenId } from '@/utils/tokenId'; import { clerkInvalidStrategy, clerkMissingWebAuthnPublicKeyOptions } from '../errors'; diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts index 5f9e53b58c2..3f0feb4d764 100644 --- a/packages/clerk-js/src/core/resources/SignIn.ts +++ b/packages/clerk-js/src/core/resources/SignIn.ts @@ -1,5 +1,22 @@ import { inBrowser } from '@clerk/shared/browser'; import { ClerkWebAuthnError } from '@clerk/shared/error'; +import { + convertJSONToPublicKeyRequestOptions, + serializePublicKeyCredentialAssertion, + webAuthnGetCredential as webAuthnGetCredentialOnWindow, +} from '@clerk/shared/internal/clerk-js/passkeys'; +import { createValidatePassword } from '@clerk/shared/internal/clerk-js/passwords/password'; +import { + generateSignatureWithBase, + generateSignatureWithCoinbaseWallet, + generateSignatureWithMetamask, + generateSignatureWithOKXWallet, + getBaseIdentifier, + getCoinbaseWalletIdentifier, + getMetamaskIdentifier, + getOKXWalletIdentifier, +} from '@clerk/shared/internal/clerk-js/web3'; +import { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate'; import { Poller } from '@clerk/shared/poller'; import type { AttemptFirstFactorParams, @@ -63,27 +80,10 @@ import { import { debugLogger } from '@/utils/debug'; -import { - generateSignatureWithBase, - generateSignatureWithCoinbaseWallet, - generateSignatureWithMetamask, - generateSignatureWithOKXWallet, - getBaseIdentifier, - getBrowserLocale, - getClerkQueryParam, - getCoinbaseWalletIdentifier, - getMetamaskIdentifier, - getOKXWalletIdentifier, - windowNavigate, -} from '../../utils'; +import { getBrowserLocale, getClerkQueryParam } from '../../utils'; import { _authenticateWithPopup } from '../../utils/authenticateWithPopup'; -import { - convertJSONToPublicKeyRequestOptions, - serializePublicKeyCredentialAssertion, - webAuthnGetCredential as webAuthnGetCredentialOnWindow, -} from '../../utils/passkeys'; -import { createValidatePassword } from '../../utils/passwords/password'; import { runAsyncResourceTask } from '../../utils/runAsyncResourceTask'; +import { loadZxcvbn } from '../../utils/zxcvbn'; import { clerkInvalidFAPIResponse, clerkInvalidStrategy, @@ -513,7 +513,7 @@ export class SignIn extends BaseResource implements SignInResource { validatePassword: ReturnType = (password, cb) => { if (SignIn.clerk.__unstable__environment?.userSettings.passwordSettings) { - return createValidatePassword({ + return createValidatePassword(loadZxcvbn, { ...SignIn.clerk.__unstable__environment?.userSettings.passwordSettings, validatePassword: true, })(password, cb); diff --git a/packages/clerk-js/src/core/resources/SignUp.ts b/packages/clerk-js/src/core/resources/SignUp.ts index 9b01c5d406b..01fd0ea0203 100644 --- a/packages/clerk-js/src/core/resources/SignUp.ts +++ b/packages/clerk-js/src/core/resources/SignUp.ts @@ -1,4 +1,16 @@ import { ClerkRuntimeError, isCaptchaError, isClerkAPIResponseError } from '@clerk/shared/error'; +import { createValidatePassword } from '@clerk/shared/internal/clerk-js/passwords/password'; +import { + generateSignatureWithBase, + generateSignatureWithCoinbaseWallet, + generateSignatureWithMetamask, + generateSignatureWithOKXWallet, + getBaseIdentifier, + getCoinbaseWalletIdentifier, + getMetamaskIdentifier, + getOKXWalletIdentifier, +} from '@clerk/shared/internal/clerk-js/web3'; +import { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate'; import { Poller } from '@clerk/shared/poller'; import type { AttemptEmailAddressVerificationParams, @@ -42,24 +54,12 @@ import type { import { debugLogger } from '@/utils/debug'; -import { - generateSignatureWithBase, - generateSignatureWithCoinbaseWallet, - generateSignatureWithMetamask, - generateSignatureWithOKXWallet, - getBaseIdentifier, - getBrowserLocale, - getClerkQueryParam, - getCoinbaseWalletIdentifier, - getMetamaskIdentifier, - getOKXWalletIdentifier, - windowNavigate, -} from '../../utils'; +import { getBrowserLocale, getClerkQueryParam } from '../../utils'; import { _authenticateWithPopup } from '../../utils/authenticateWithPopup'; import { CaptchaChallenge } from '../../utils/captcha/CaptchaChallenge'; -import { createValidatePassword } from '../../utils/passwords/password'; import { normalizeUnsafeMetadata } from '../../utils/resourceParams'; import { runAsyncResourceTask } from '../../utils/runAsyncResourceTask'; +import { loadZxcvbn } from '../../utils/zxcvbn'; import { clerkInvalidFAPIResponse, clerkMissingOptionError, @@ -463,7 +463,7 @@ export class SignUp extends BaseResource implements SignUpResource { validatePassword: ReturnType = (password, cb) => { if (SignUp.clerk.__unstable__environment?.userSettings.passwordSettings) { - return createValidatePassword({ + return createValidatePassword(loadZxcvbn, { ...SignUp.clerk.__unstable__environment?.userSettings.passwordSettings, validatePassword: true, })(password, cb); diff --git a/packages/clerk-js/src/core/resources/User.ts b/packages/clerk-js/src/core/resources/User.ts index 8f61851b1c5..3de4b518943 100644 --- a/packages/clerk-js/src/core/resources/User.ts +++ b/packages/clerk-js/src/core/resources/User.ts @@ -1,3 +1,4 @@ +import { getFullName } from '@clerk/shared/internal/clerk-js/user'; import type { BackupCodeJSON, BackupCodeResource, @@ -34,7 +35,6 @@ import type { import { unixEpochToDate } from '../../utils/date'; import { normalizeUnsafeMetadata } from '../../utils/resourceParams'; -import { getFullName } from '../../utils/user'; import { eventBus, events } from '../events'; import { addPaymentMethod, getPaymentMethods, initializePaymentMethod } from '../modules/billing'; import { BackupCode } from './BackupCode'; diff --git a/packages/clerk-js/src/core/resources/Verification.ts b/packages/clerk-js/src/core/resources/Verification.ts index d9f739d2565..8adde912f1d 100644 --- a/packages/clerk-js/src/core/resources/Verification.ts +++ b/packages/clerk-js/src/core/resources/Verification.ts @@ -17,7 +17,7 @@ import type { } from '@clerk/shared/types'; import { unixEpochToDate } from '../../utils/date'; -import { convertJSONToPublicKeyCreateOptions } from '../../utils/passkeys'; +import { convertJSONToPublicKeyCreateOptions } from '@clerk/shared/internal/clerk-js/passkeys'; import { BaseResource } from './internal'; export class Verification extends BaseResource implements VerificationResource { diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts index 1d001112280..dc18ffaced5 100644 --- a/packages/clerk-js/src/core/warnings.ts +++ b/packages/clerk-js/src/core/warnings.ts @@ -1,63 +1,2 @@ -import type { Serializable } from '@clerk/shared/types'; - -const formatWarning = (msg: string) => { - return `🔒 Clerk:\n${msg.trim()}\n(This notice only appears in development)`; -}; - -const createMessageForDisabledOrganizations = ( - componentName: - | 'OrganizationProfile' - | 'OrganizationSwitcher' - | 'OrganizationList' - | 'CreateOrganization' - | 'TaskChooseOrganization', -) => { - return formatWarning( - `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`, - ); -}; -const createMessageForDisabledBilling = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => { - return formatWarning( - `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable billing. Since billing is disabled, this is no-op.`, - ); -}; -const warnings = { - cannotRenderComponentWhenSessionExists: - 'The and components cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the Home URL instead.', - cannotRenderSignUpComponentWhenSessionExists: - 'The component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the value set in `afterSignUp` URL instead.', - cannotRenderSignUpComponentWhenTaskExists: - 'The component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.', - cannotRenderComponentWhenTaskDoesNotExist: - ' cannot render unless a session task is pending. Clerk is redirecting to the value set in `redirectUrlComplete` instead.', - cannotRenderSignInComponentWhenSessionExists: - 'The component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead.', - cannotRenderSignInComponentWhenTaskExists: - 'The component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.', - cannotRenderComponentWhenUserDoesNotExist: - ' cannot render unless a user is signed in. Since no user is signed in, this is no-op.', - cannotRenderComponentWhenOrgDoesNotExist: ` cannot render unless an organization is active. Since no organization is currently active, this is no-op.`, - cannotRenderAnyOrganizationComponent: createMessageForDisabledOrganizations, - cannotRenderAnyBillingComponent: createMessageForDisabledBilling, - cannotOpenUserProfile: - 'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.', - cannotOpenCheckout: - 'The Checkout drawer cannot render unless a user is signed in. Since no user is signed in, this is no-op.', - cannotOpenSignInOrSignUp: - 'The SignIn or SignUp modals do not render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, this is no-op.', - cannotRenderAPIKeysComponent: - 'The component cannot be rendered when API keys is disabled. Since API keys is disabled, this is no-op.', - cannotRenderAPIKeysComponentForOrgWhenUnauthorized: - 'The component cannot be rendered for an organization unless a user has the required permissions. Since the user does not have the necessary permissions, this is no-op.', -}; - -type SerializableWarnings = Serializable; - -for (const key of Object.keys(warnings)) { - const item = warnings[key as keyof typeof warnings]; - if (typeof item !== 'function') { - warnings[key as keyof SerializableWarnings] = formatWarning(item); - } -} - -export { warnings }; +// Re-export warnings from shared package +export { warnings } from '@clerk/shared/internal/clerk-js/warnings'; diff --git a/packages/clerk-js/src/global.d.ts b/packages/clerk-js/src/global.d.ts index 50a17aae822..cf6fc523c1b 100644 --- a/packages/clerk-js/src/global.d.ts +++ b/packages/clerk-js/src/global.d.ts @@ -17,4 +17,14 @@ declare const __BUILD_VARIANT_CHIPS__: boolean; interface Window { __unstable__onBeforeSetActive: (intent?: 'sign-out') => Promise | void; __unstable__onAfterSetActive: () => Promise | void; + + /** + * TODO @nikos: implment type + * UI components loaded from @clerk/ui browser bundle. + * This is injected by the @clerk/ui package and consumed by clerk-js. + */ + __unstable_ClerkUi?: { + mountComponentRenderer: any; + version: string; + }; } diff --git a/packages/clerk-js/src/index.browser.ts b/packages/clerk-js/src/index.browser.ts index 82bd326c1a6..9e33caaf982 100644 --- a/packages/clerk-js/src/index.browser.ts +++ b/packages/clerk-js/src/index.browser.ts @@ -1,13 +1,14 @@ // It's crucial this is the first import, // otherwise chunk loading will not work -// eslint-disable-next-line + import './utils/setWebpackChunkPublicPath'; import { Clerk } from './core/clerk'; -import { mountComponentRenderer } from './ui/Components'; - -Clerk.mountComponentRenderer = mountComponentRenderer; +// Load UI components from window (injected by @clerk/ui browser bundle) +if (window.__unstable_ClerkUi) { + Clerk.mountComponentRenderer = window.__unstable_ClerkUi.mountComponentRenderer; +} const publishableKey = document.querySelector('script[data-clerk-publishable-key]')?.getAttribute('data-clerk-publishable-key') || @@ -26,7 +27,7 @@ const domain = if (!window.Clerk) { window.Clerk = new Clerk(publishableKey, { proxyUrl, - // @ts-expect-error + // @ts-expect-error - domain is not typed domain, }); } diff --git a/packages/clerk-js/src/index.legacy.browser.ts b/packages/clerk-js/src/index.legacy.browser.ts index 7d0d031c6cc..9ce87913580 100644 --- a/packages/clerk-js/src/index.legacy.browser.ts +++ b/packages/clerk-js/src/index.legacy.browser.ts @@ -7,9 +7,10 @@ import 'regenerator-runtime/runtime'; import { Clerk } from './core/clerk'; -import { mountComponentRenderer } from './ui/Components'; - -Clerk.mountComponentRenderer = mountComponentRenderer; +// Load UI components from window (injected by @clerk/ui browser bundle) +if (window.__unstable_ClerkUi) { + Clerk.mountComponentRenderer = window.__unstable_ClerkUi.mountComponentRenderer; +} const publishableKey = document.querySelector('script[data-clerk-publishable-key]')?.getAttribute('data-clerk-publishable-key') || diff --git a/packages/clerk-js/src/index.ts b/packages/clerk-js/src/index.ts index 2f9acf96b6e..f7ad89e436d 100644 --- a/packages/clerk-js/src/index.ts +++ b/packages/clerk-js/src/index.ts @@ -1,7 +1,6 @@ import 'regenerator-runtime/runtime'; import { Clerk } from './core/clerk'; -import { mountComponentRenderer } from './ui/Components'; export { ClerkAPIResponseError, @@ -19,8 +18,6 @@ export { } from '@clerk/shared/error'; export { Clerk }; -Clerk.mountComponentRenderer = mountComponentRenderer; - if (module.hot) { module.hot.accept(); } diff --git a/packages/clerk-js/src/ui/components/SignUp/util.ts b/packages/clerk-js/src/ui/components/SignUp/util.ts deleted file mode 100644 index 343a9bcaccc..00000000000 --- a/packages/clerk-js/src/ui/components/SignUp/util.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../../../utils/completeSignUpFlow'; diff --git a/packages/clerk-js/src/ui/localization/defaultEnglishResource.ts b/packages/clerk-js/src/ui/localization/defaultEnglishResource.ts deleted file mode 100644 index 81219b7f1ef..00000000000 --- a/packages/clerk-js/src/ui/localization/defaultEnglishResource.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { enUS } from '@clerk/localizations'; -import type { DeepRequired } from '@clerk/shared/types'; - -export const defaultResource = enUS as DeepRequired; diff --git a/packages/clerk-js/src/utils/beforeUnloadTracker.ts b/packages/clerk-js/src/utils/beforeUnloadTracker.ts index 59094c63bed..a9ce63b70f1 100644 --- a/packages/clerk-js/src/utils/beforeUnloadTracker.ts +++ b/packages/clerk-js/src/utils/beforeUnloadTracker.ts @@ -1,4 +1,4 @@ -import { CLERK_BEFORE_UNLOAD_EVENT } from './windowNavigate'; +import { CLERK_BEFORE_UNLOAD_EVENT } from '@clerk/shared/internal/clerk-js/windowNavigate'; /** * Tracks beforeUnload events. diff --git a/packages/clerk-js/src/utils/captcha/constants.ts b/packages/clerk-js/src/utils/captcha/constants.ts deleted file mode 100644 index 7ad0a0e05c0..00000000000 --- a/packages/clerk-js/src/utils/captcha/constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const CAPTCHA_ELEMENT_ID = 'clerk-captcha'; -export const CAPTCHA_INVISIBLE_CLASSNAME = 'clerk-invisible-captcha'; diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index 1a21f57d1dc..71150d992f4 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -1,8 +1,8 @@ import { waitForElement } from '@clerk/shared/dom'; +import { CAPTCHA_ELEMENT_ID, CAPTCHA_INVISIBLE_CLASSNAME } from '@clerk/shared/internal/clerk-js/constants'; import { loadScript } from '@clerk/shared/loadScript'; import type { CaptchaAppearanceOptions, CaptchaWidgetType } from '@clerk/shared/types'; -import { CAPTCHA_ELEMENT_ID, CAPTCHA_INVISIBLE_CLASSNAME } from './constants'; import type { CaptchaOptions } from './types'; // We use the explicit render mode to be able to control when the widget is rendered. diff --git a/packages/clerk-js/src/utils/index.ts b/packages/clerk-js/src/utils/index.ts index 37bd8d49ff6..032c505c1d6 100644 --- a/packages/clerk-js/src/utils/index.ts +++ b/packages/clerk-js/src/utils/index.ts @@ -1,30 +1,23 @@ -export * from './appearance'; export * from './beforeUnloadTracker'; export * from './billing'; -export * from './completeSignUpFlow'; -export * from './componentGuards'; -export * from './dynamicParamParser'; -export * from './email'; -export * from './encoders'; +export * from '@clerk/shared/internal/clerk-js/completeSignUpFlow'; +export * from '@clerk/shared/internal/clerk-js/email'; +export * from '@clerk/shared/internal/clerk-js/encoders'; export * from './errors'; export * from './errorThrower'; export * from './filterUndefinedValues'; -export * from './getClerkQueryParam'; -export * from './hex'; +export * from '@clerk/shared/internal/clerk-js/queryParams'; export * from './ignoreEventValue'; -export * from './image'; export * from './instance'; export * from './jwt'; export * from './locale'; -export * from './normalizeRoutingOptions'; -export * from './organization'; +export * from '@clerk/shared/internal/clerk-js/organization'; export * from './pageLifecycle'; -export * from './path'; -export * from './props'; -export * from './queryStateParams'; -export * from './querystring'; -export * from './runtime'; +export * from '@clerk/shared/internal/clerk-js/path'; +export * from '@clerk/shared/internal/clerk-js/queryStateParams'; +export * from '@clerk/shared/internal/clerk-js/querystring'; +export * from '@clerk/shared/internal/clerk-js/runtime'; export * from './tokenId'; -export * from './url'; -export * from './web3'; -export * from './windowNavigate'; +export * from '@clerk/shared/internal/clerk-js/url'; +export * from '@clerk/shared/internal/clerk-js/web3'; +export * from '@clerk/shared/internal/clerk-js/windowNavigate'; diff --git a/packages/clerk-js/src/utils/instance.ts b/packages/clerk-js/src/utils/instance.ts index 404a81608ec..97b869e7675 100644 --- a/packages/clerk-js/src/utils/instance.ts +++ b/packages/clerk-js/src/utils/instance.ts @@ -1,4 +1,4 @@ -import { isDevOrStagingUrl } from './url'; +import { isDevOrStagingUrl } from '@clerk/shared/internal/clerk-js/url'; const FRONTEND_API_DEV_OR_STG_REGEX = /^clerk\.([\w|-]+\.){2,4}(dev|com)$/i; diff --git a/packages/clerk-js/src/utils/jwt.ts b/packages/clerk-js/src/utils/jwt.ts index 9bac22a6274..e921ddb8912 100644 --- a/packages/clerk-js/src/utils/jwt.ts +++ b/packages/clerk-js/src/utils/jwt.ts @@ -1,7 +1,6 @@ +import { urlDecodeB64 } from '@clerk/shared/internal/clerk-js/encoders'; import type { JWT, JwtPayload } from '@clerk/shared/types'; -import { urlDecodeB64 } from './encoders'; - export function decode(token: string): JWT { const parts = (token || '').split('.'); const [header, payload, signature] = parts; diff --git a/packages/clerk-js/tsconfig.json b/packages/clerk-js/tsconfig.json index 96bcc440b5b..896a6e8665a 100644 --- a/packages/clerk-js/tsconfig.json +++ b/packages/clerk-js/tsconfig.json @@ -24,5 +24,5 @@ "@/*": ["./src/*"] } }, - "include": ["src", "vitest.config.mts", "vitest.setup.mts"] + "include": ["src", "vitest.config.mts", "vitest.setup.mts", "../shared/internal/clerk-js/componentGuards.ts"] } diff --git a/packages/nextjs/src/server/constants.ts b/packages/nextjs/src/server/constants.ts index 73c4371486f..4165b2ae4d1 100644 --- a/packages/nextjs/src/server/constants.ts +++ b/packages/nextjs/src/server/constants.ts @@ -3,6 +3,7 @@ import { isTruthy } from '@clerk/shared/underscore'; export const CLERK_JS_VERSION = process.env.NEXT_PUBLIC_CLERK_JS_VERSION || ''; export const CLERK_JS_URL = process.env.NEXT_PUBLIC_CLERK_JS_URL || ''; +export const CLERK_UI_URL = process.env.NEXT_PUBLIC_CLERK_UI_URL || ''; export const API_VERSION = process.env.CLERK_API_VERSION || 'v1'; export const SECRET_KEY = process.env.CLERK_SECRET_KEY || ''; export const MACHINE_SECRET_KEY = process.env.CLERK_MACHINE_SECRET_KEY || ''; diff --git a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts index fe8a7937aa3..0f9bfb8c974 100644 --- a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts +++ b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts @@ -9,6 +9,7 @@ export const mergeNextClerkPropsWithEnv = (props: Omit { + console.log('local clerk react'); + if (this.mode !== 'browser' || this.loaded) { return; } @@ -475,20 +481,26 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { global.Clerk = c; } else if (!__BUILD_DISABLE_RHC__) { // Hot-load latest ClerkJS from Clerk CDN - if (!global.Clerk) { - await loadClerkJsScript({ - ...this.options, - publishableKey: this.#publishableKey, - proxyUrl: this.proxyUrl, - domain: this.domain, - nonce: this.options.nonce, - }); - } + const scriptLoadingOptions = { + ...this.options, + publishableKey: this.#publishableKey, + proxyUrl: this.proxyUrl, + domain: this.domain, + nonce: this.options.nonce, + }; + + await Promise.all([ + global.Clerk ? Promise.resolve() : loadClerkJsScript(scriptLoadingOptions), + global.__unstable_ClerkUi ? Promise.resolve() : loadClerkUiScript(scriptLoadingOptions), + ]); if (!global.Clerk) { + // TODO @nikos: somehow throw if clerk ui failed to load but it was not headless throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.'); } + console.log('all loaded'); + this.beforeLoad(global.Clerk); await global.Clerk.load(this.options); } diff --git a/packages/shared/global.d.ts b/packages/shared/global.d.ts index 5776b61ae17..5f8f225c39d 100644 --- a/packages/shared/global.d.ts +++ b/packages/shared/global.d.ts @@ -2,6 +2,7 @@ declare const PACKAGE_NAME: string; declare const PACKAGE_VERSION: string; declare const JS_PACKAGE_VERSION: string; declare const __DEV__: boolean; +declare const __BUILD_DISABLE_RHC__: boolean; interface ImportMetaEnv { readonly [key: string]: string; diff --git a/packages/shared/package.json b/packages/shared/package.json index cd1f496432a..6f4123c4270 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -80,6 +80,16 @@ "default": "./dist/types/index.js" } }, + "./internal/clerk-js/*": { + "import": { + "types": "./dist/runtime/internal/clerk-js/*.d.mts", + "default": "./dist/runtime/internal/clerk-js/*.mjs" + }, + "require": { + "types": "./dist/runtime/internal/clerk-js/*.d.ts", + "default": "./dist/runtime/internal/clerk-js/*.js" + } + }, "./package.json": "./package.json" }, "files": [ diff --git a/packages/shared/src/__tests__/loadClerkJsScript.spec.ts b/packages/shared/src/__tests__/loadClerkJsScript.spec.ts index 58e3d728ec4..af593ce79a1 100644 --- a/packages/shared/src/__tests__/loadClerkJsScript.spec.ts +++ b/packages/shared/src/__tests__/loadClerkJsScript.spec.ts @@ -4,6 +4,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; import { ClerkRuntimeError } from '../error'; import { buildClerkJsScriptAttributes, + buildScriptHost, clerkJsScriptUrl, loadClerkJsScript, setClerkJsLoadingErrorPackageName, @@ -186,6 +187,65 @@ describe('clerkJsScriptUrl()', () => { }); }); +describe('buildScriptHost()', () => { + const mockDevPublishableKey = 'pk_test_Zm9vLWJhci0xMy5jbGVyay5hY2NvdW50cy5kZXYk'; + const mockProdPublishableKey = 'pk_live_ZXhhbXBsZS5jbGVyay5hY2NvdW50cy5kZXYk'; + const mockProxyUrl = 'https://proxy.clerk.com'; + const mockDomain = 'custom.com'; + + test('returns frontendApi from publishableKey when no proxyUrl or domain', () => { + const result = buildScriptHost({ publishableKey: mockDevPublishableKey }); + expect(result).toBe('foo-bar-13.clerk.accounts.dev'); + }); + + test('returns proxyUrl host when proxyUrl is provided and valid', () => { + const result = buildScriptHost({ publishableKey: mockDevPublishableKey, proxyUrl: mockProxyUrl }); + expect(result).toBe('proxy.clerk.com'); + }); + + test('returns domain with clerk prefix when domain is provided for production key', () => { + const result = buildScriptHost({ publishableKey: mockProdPublishableKey, domain: mockDomain }); + expect(result).toBe('clerk.custom.com'); + }); + + test('returns frontendApi when domain is provided for development key', () => { + const result = buildScriptHost({ publishableKey: mockDevPublishableKey, domain: mockDomain }); + expect(result).toBe('foo-bar-13.clerk.accounts.dev'); + }); + + test('prioritizes proxyUrl over domain', () => { + const result = buildScriptHost({ + publishableKey: mockProdPublishableKey, + proxyUrl: mockProxyUrl, + domain: mockDomain, + }); + expect(result).toBe('proxy.clerk.com'); + }); + + test('handles relative proxyUrl', () => { + // Mock window.location for relative URL conversion + const originalLocation = global.window.location; + Object.defineProperty(global.window, 'location', { + get() { + return { + origin: 'https://example.com', + }; + }, + configurable: true, + }); + + const result = buildScriptHost({ publishableKey: mockDevPublishableKey, proxyUrl: '/__clerk' }); + // Relative URLs are converted to absolute, then protocol is stripped + expect(result).toBe('example.com/__clerk'); + + // Restore original location + Object.defineProperty(global.window, 'location', { + value: originalLocation, + writable: true, + }); + }); +}); + describe('buildClerkJsScriptAttributes()', () => { const mockPublishableKey = 'pk_test_Zm9vLWJhci0xMy5jbGVyay5hY2NvdW50cy5kZXYk'; const mockProxyUrl = 'https://proxy.clerk.com'; diff --git a/packages/clerk-js/src/utils/__tests__/completeSignUpFlow.test.ts b/packages/shared/src/internal/clerk-js/__tests__/completeSignUpFlow.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/completeSignUpFlow.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/completeSignUpFlow.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/email.test.ts b/packages/shared/src/internal/clerk-js/__tests__/email.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/email.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/email.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/encoders.test.ts b/packages/shared/src/internal/clerk-js/__tests__/encoders.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/encoders.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/encoders.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/organization.test.ts b/packages/shared/src/internal/clerk-js/__tests__/organization.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/organization.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/organization.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/passkeys.test.ts b/packages/shared/src/internal/clerk-js/__tests__/passkeys.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/passkeys.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/passkeys.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/path.test.ts b/packages/shared/src/internal/clerk-js/__tests__/path.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/path.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/path.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/getClerkQueryParam.test.ts b/packages/shared/src/internal/clerk-js/__tests__/queryParams.test.ts similarity index 98% rename from packages/clerk-js/src/utils/__tests__/getClerkQueryParam.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/queryParams.test.ts index 110539f2893..0f5a437e18e 100644 --- a/packages/clerk-js/src/utils/__tests__/getClerkQueryParam.test.ts +++ b/packages/shared/src/internal/clerk-js/__tests__/queryParams.test.ts @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { CLERK_SYNCED } from '../../core/constants'; -import { forwardClerkQueryParams, getClerkQueryParam, removeClerkQueryParam } from '../getClerkQueryParam'; +import { CLERK_SYNCED } from '../constants'; +import { forwardClerkQueryParams, getClerkQueryParam, removeClerkQueryParam } from '../queryParams'; describe('getClerkQueryParam', () => { beforeEach(() => { diff --git a/packages/clerk-js/src/utils/__tests__/queryStateParams.test.ts b/packages/shared/src/internal/clerk-js/__tests__/queryStateParams.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/queryStateParams.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/queryStateParams.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/querystring.test.ts b/packages/shared/src/internal/clerk-js/__tests__/querystring.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/querystring.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/querystring.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/redirectUrls.test.ts b/packages/shared/src/internal/clerk-js/__tests__/redirectUrls.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/redirectUrls.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/redirectUrls.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/url.test.ts b/packages/shared/src/internal/clerk-js/__tests__/url.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/url.test.ts rename to packages/shared/src/internal/clerk-js/__tests__/url.test.ts diff --git a/packages/clerk-js/src/utils/assertNoLegacyProp.ts b/packages/shared/src/internal/clerk-js/assertNoLegacyProp.ts similarity index 96% rename from packages/clerk-js/src/utils/assertNoLegacyProp.ts rename to packages/shared/src/internal/clerk-js/assertNoLegacyProp.ts index a574b8d9e2f..89f6a5a58d3 100644 --- a/packages/clerk-js/src/utils/assertNoLegacyProp.ts +++ b/packages/shared/src/internal/clerk-js/assertNoLegacyProp.ts @@ -1,4 +1,4 @@ -import { logger } from '@clerk/shared/logger'; +import { logger } from '../../logger'; export function assertNoLegacyProp(props: Record) { const legacyProps = ['redirectUrl', 'afterSignInUrl', 'afterSignUpUrl', 'after_sign_in_url', 'after_sign_up_url']; diff --git a/packages/clerk-js/src/utils/completeSignUpFlow.ts b/packages/shared/src/internal/clerk-js/completeSignUpFlow.ts similarity index 96% rename from packages/clerk-js/src/utils/completeSignUpFlow.ts rename to packages/shared/src/internal/clerk-js/completeSignUpFlow.ts index 686a5f9775e..89a48dde533 100644 --- a/packages/clerk-js/src/utils/completeSignUpFlow.ts +++ b/packages/shared/src/internal/clerk-js/completeSignUpFlow.ts @@ -1,6 +1,6 @@ import type { SignUpResource } from '@clerk/shared/types'; -import { forwardClerkQueryParams } from './getClerkQueryParam'; +import { forwardClerkQueryParams } from './queryParams'; type CompleteSignUpFlowProps = { signUp: SignUpResource; diff --git a/packages/clerk-js/src/utils/componentGuards.ts b/packages/shared/src/internal/clerk-js/componentGuards.ts similarity index 100% rename from packages/clerk-js/src/utils/componentGuards.ts rename to packages/shared/src/internal/clerk-js/componentGuards.ts diff --git a/packages/shared/src/internal/clerk-js/constants.ts b/packages/shared/src/internal/clerk-js/constants.ts new file mode 100644 index 00000000000..b54ca5255a8 --- /dev/null +++ b/packages/shared/src/internal/clerk-js/constants.ts @@ -0,0 +1,60 @@ +import type { SignUpModes } from '../../types'; + +// TODO: Do we still have a use for this or can we simply preserve all params? +export const PRESERVED_QUERYSTRING_PARAMS = [ + 'redirect_url', + 'after_sign_in_url', + 'after_sign_up_url', + 'sign_in_force_redirect_url', + 'sign_in_fallback_redirect_url', + 'sign_up_force_redirect_url', + 'sign_up_fallback_redirect_url', +]; + +export const CLERK_MODAL_STATE = '__clerk_modal_state'; +export const CLERK_SYNCED = '__clerk_synced'; +export const CLERK_SUFFIXED_COOKIES = 'suffixed_cookies'; +export const CLERK_SATELLITE_URL = '__clerk_satellite_url'; +export const ERROR_CODES = { + FORM_IDENTIFIER_NOT_FOUND: 'form_identifier_not_found', + FORM_PASSWORD_INCORRECT: 'form_password_incorrect', + FORM_PASSWORD_PWNED: 'form_password_pwned', + INVALID_STRATEGY_FOR_USER: 'strategy_for_user_invalid', + NOT_ALLOWED_TO_SIGN_UP: 'not_allowed_to_sign_up', + OAUTH_ACCESS_DENIED: 'oauth_access_denied', + OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML: 'oauth_email_domain_reserved_by_saml', + NOT_ALLOWED_ACCESS: 'not_allowed_access', + SAML_USER_ATTRIBUTE_MISSING: 'saml_user_attribute_missing', + USER_LOCKED: 'user_locked', + EXTERNAL_ACCOUNT_NOT_FOUND: 'external_account_not_found', + SIGN_UP_MODE_RESTRICTED: 'sign_up_mode_restricted', + SIGN_UP_MODE_RESTRICTED_WAITLIST: 'sign_up_restricted_waitlist', + ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING: 'enterprise_sso_user_attribute_missing', + ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'enterprise_sso_email_address_domain_mismatch', + ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH: 'enterprise_sso_hosted_domain_mismatch', + SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'saml_email_address_domain_mismatch', + INVITATION_ACCOUNT_NOT_EXISTS: 'invitation_account_not_exists', + ORGANIZATION_MEMBERSHIP_QUOTA_EXCEEDED_FOR_SSO: 'organization_membership_quota_exceeded_for_sso', + CAPTCHA_INVALID: 'captcha_invalid', + FRAUD_DEVICE_BLOCKED: 'device_blocked', + FRAUD_ACTION_BLOCKED: 'action_blocked', + SIGNUP_RATE_LIMIT_EXCEEDED: 'signup_rate_limit_exceeded', + USER_BANNED: 'user_banned', +} as const; + +export const SIGN_IN_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username']; +export const SIGN_UP_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username', 'first_name', 'last_name']; + +export const DEBOUNCE_MS = 350; + +export const SIGN_UP_MODES = { + PUBLIC: 'public', + RESTRICTED: 'restricted', + WAITLIST: 'waitlist', +} satisfies Record; + +// This is the currently supported version of the Frontend API +export const SUPPORTED_FAPI_VERSION = '2025-04-10'; + +export const CAPTCHA_ELEMENT_ID = 'clerk-captcha'; +export const CAPTCHA_INVISIBLE_CLASSNAME = 'clerk-invisible-captcha'; diff --git a/packages/clerk-js/src/utils/email.ts b/packages/shared/src/internal/clerk-js/email.ts similarity index 100% rename from packages/clerk-js/src/utils/email.ts rename to packages/shared/src/internal/clerk-js/email.ts diff --git a/packages/clerk-js/src/utils/encoders.ts b/packages/shared/src/internal/clerk-js/encoders.ts similarity index 100% rename from packages/clerk-js/src/utils/encoders.ts rename to packages/shared/src/internal/clerk-js/encoders.ts diff --git a/packages/shared/src/internal/clerk-js/errors.ts b/packages/shared/src/internal/clerk-js/errors.ts new file mode 100644 index 00000000000..b928460e43f --- /dev/null +++ b/packages/shared/src/internal/clerk-js/errors.ts @@ -0,0 +1,206 @@ +const errorPrefix = 'ClerkJS:'; + +/** + * + */ +export function clerkErrorPathRouterMissingPath(componentName: string): never { + throw new Error( + `${errorPrefix} Missing path option. The ${componentName} component was mounted with path routing so you need to specify the path where the component is mounted on e.g. path="/sign-in".`, + ); +} + +/** + * + */ +export function clerkInvalidRoutingStrategy(strategy?: string): never { + throw new Error(`${errorPrefix} Invalid routing strategy, path cannot be used in tandem with ${strategy}.`); +} + +/** + * + */ +export function clerkCoreErrorNoClerkSingleton(): never { + throw new Error( + `${errorPrefix} Clerk instance not found. Make sure Clerk is initialized before using any Clerk components.`, + ); +} + +/** + * + */ +export function clerkCoreErrorContextProviderNotFound(providerName: string): never { + throw new Error(`${errorPrefix} ${providerName} not found. Make sure you wrap your app with <${providerName}>.`); +} + +/** + * + */ +export function clerkUIErrorDOMElementNotFound(): never { + throw new Error(`${errorPrefix} The target element is empty. Provide a valid DOM element.`); +} + +/** + * Used to log a warning when a Clerk feature is used in an unsupported environment. + * (Development Only) + * This is a warning and not an error because the application will still work, but the feature will not be available. + * + * @param strategy - The strategy that is not supported in the current environment. + * @returns void + */ +export function clerkUnsupportedEnvironmentWarning(strategy: string) { + console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`); +} + +/** + * + */ +export function clerkNetworkError(url: string, e: Error): never { + throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`); +} + +/** + * + */ +export function clerkErrorInitFailed(): never { + throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`); +} + +/** + * + */ +export function clerkErrorDevInitFailed(msg = ''): never { + throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`); +} + +/** + * + */ +export function clerkMissingFapiClientInResources(): never { + throw new Error(`${errorPrefix} Missing FAPI client in resources.`); +} + +/** + * + */ +export function clerkOAuthCallbackDidNotCompleteSignInSignUp(type: 'sign in' | 'sign up'): never { + throw new Error( + `${errorPrefix} Something went wrong initializing Clerk during the ${type} flow. Please contact support.`, + ); +} + +/** + * + */ +export function clerkVerifyEmailAddressCalledBeforeCreate(type: 'SignIn' | 'SignUp'): never { + throw new Error(`${errorPrefix} You need to start a ${type} flow by calling ${type}.create() first.`); +} + +/** + * + */ +export function clerkInvalidStrategy(functionaName: string, strategy: string): never { + throw new Error(`${errorPrefix} Strategy "${strategy}" is not a valid strategy for ${functionaName}.`); +} + +/** + * + */ +export function clerkVerifyWeb3WalletCalledBeforeCreate(type: 'SignIn' | 'SignUp'): never { + throw new Error( + `${errorPrefix} You need to start a ${type} flow by calling ${type}.create({ identifier: 'your web3 wallet address' }) first`, + ); +} + +/** + * + */ +export function clerkVerifyPasskeyCalledBeforeCreate(): never { + throw new Error( + `${errorPrefix} You need to start a SignIn flow by calling SignIn.create({ strategy: 'passkey' }) first`, + ); +} + +/** + * + */ +export function clerkMissingOptionError(name = ''): never { + throw new Error(`${errorPrefix} Missing '${name}' option`); +} + +/** + * + */ +export function clerkInvalidFAPIResponse(status: string | null, supportEmail: string): never { + throw new Error( + `${errorPrefix} Response: ${status || 0} not supported yet.\nFor more information contact us at ${supportEmail}`, + ); +} + +/** + * + */ +export function clerkMissingDevBrowserJwt(): never { + throw new Error(`${errorPrefix} Missing dev browser jwt. Please contact support.`); +} + +/** + * + */ +export function clerkMissingProxyUrlAndDomain(): never { + throw new Error( + `${errorPrefix} Missing domain and proxyUrl. A satellite application needs to specify a domain or a proxyUrl.`, + ); +} + +/** + * + */ +export function clerkInvalidSignInUrlOrigin(): never { + throw new Error(`${errorPrefix} The signInUrl needs to be on a different origin than your satellite application.`); +} + +/** + * + */ +export function clerkInvalidSignInUrlFormat(): never { + throw new Error(`${errorPrefix} The signInUrl needs to have a absolute url format.`); +} + +/** + * + */ +export function clerkMissingSignInUrlAsSatellite(): never { + throw new Error( + `${errorPrefix} Missing signInUrl. A satellite application needs to specify the signInUrl for development instances.`, + ); +} + +/** + * + */ +export function clerkRedirectUrlIsMissingScheme(): never { + throw new Error(`${errorPrefix} Invalid redirect_url. A valid http or https url should be used for the redirection.`); +} + +/** + * + */ +export function clerkFailedToLoadThirdPartyScript(name?: string): never { + throw new Error(`${errorPrefix} Unable to retrieve a third party script${name ? ` ${name}` : ''}.`); +} + +/** + * + */ +export function clerkUnsupportedReloadMethod(className: string): never { + throw new Error(`${errorPrefix} Calling ${className}.reload is not currently supported. Please contact support.`); +} + +/** + * + */ +export function clerkMissingWebAuthnPublicKeyOptions(name: 'create' | 'get'): never { + throw new Error( + `${errorPrefix} Missing publicKey. When calling 'navigator.credentials.${name}()' it is required to pass a publicKey object.`, + ); +} diff --git a/packages/clerk-js/src/utils/hex.ts b/packages/shared/src/internal/clerk-js/hex.ts similarity index 100% rename from packages/clerk-js/src/utils/hex.ts rename to packages/shared/src/internal/clerk-js/hex.ts diff --git a/packages/clerk-js/src/utils/injectedWeb3Providers.ts b/packages/shared/src/internal/clerk-js/injectedWeb3Providers.ts similarity index 100% rename from packages/clerk-js/src/utils/injectedWeb3Providers.ts rename to packages/shared/src/internal/clerk-js/injectedWeb3Providers.ts diff --git a/packages/clerk-js/src/utils/organization.ts b/packages/shared/src/internal/clerk-js/organization.ts similarity index 100% rename from packages/clerk-js/src/utils/organization.ts rename to packages/shared/src/internal/clerk-js/organization.ts diff --git a/packages/clerk-js/src/utils/passkeys.ts b/packages/shared/src/internal/clerk-js/passkeys.ts similarity index 98% rename from packages/clerk-js/src/utils/passkeys.ts rename to packages/shared/src/internal/clerk-js/passkeys.ts index 8697cdedab8..bbc95650dc3 100644 --- a/packages/clerk-js/src/utils/passkeys.ts +++ b/packages/shared/src/internal/clerk-js/passkeys.ts @@ -1,5 +1,3 @@ -import type { ClerkRuntimeError } from '@clerk/shared/error'; -import { ClerkWebAuthnError } from '@clerk/shared/error'; import type { CredentialReturn, PublicKeyCredentialCreationOptionsJSON, @@ -10,6 +8,9 @@ import type { PublicKeyCredentialWithAuthenticatorAttestationResponse, } from '@clerk/shared/types'; +import type { ClerkRuntimeError } from '../../error'; +import { ClerkWebAuthnError } from '../../error'; + type WebAuthnCreateCredentialReturn = CredentialReturn; type WebAuthnGetCredentialReturn = CredentialReturn; @@ -125,6 +126,7 @@ function handlePublicKeyError(error: Error): ClerkWebAuthnError | ClerkRuntimeEr /** * Map webauthn errors from `navigator.credentials.create()` to Clerk-js errors + * * @param error */ function handlePublicKeyCreateError(error: Error): ClerkWebAuthnError | ClerkRuntimeError | Error { @@ -140,6 +142,7 @@ function handlePublicKeyCreateError(error: Error): ClerkWebAuthnError | ClerkRun /** * Map webauthn errors from `navigator.credentials.get()` to Clerk-js errors + * * @param error */ function handlePublicKeyGetError(error: Error): ClerkWebAuthnError | ClerkRuntimeError | Error { diff --git a/packages/clerk-js/src/utils/passwords/complexity.ts b/packages/shared/src/internal/clerk-js/passwords/complexity.ts similarity index 100% rename from packages/clerk-js/src/utils/passwords/complexity.ts rename to packages/shared/src/internal/clerk-js/passwords/complexity.ts diff --git a/packages/clerk-js/src/utils/passwords/password.ts b/packages/shared/src/internal/clerk-js/passwords/password.ts similarity index 83% rename from packages/clerk-js/src/utils/passwords/password.ts rename to packages/shared/src/internal/clerk-js/passwords/password.ts index 7e725291460..7e8e9e45b99 100644 --- a/packages/clerk-js/src/utils/passwords/password.ts +++ b/packages/shared/src/internal/clerk-js/passwords/password.ts @@ -1,10 +1,16 @@ -import type { PasswordSettingsData, PasswordValidation, ValidatePasswordCallbacks } from '@clerk/shared/types'; -import { noop } from '@clerk/shared/utils'; +import type { + PasswordSettingsData, + PasswordValidation, + ValidatePasswordCallbacks, + ZxcvbnResult, +} from '@clerk/shared/types'; -import { loadZxcvbn } from '../zxcvbn'; +import { noop } from '../../../utils'; import { createValidateComplexity } from './complexity'; import { createValidatePasswordStrength } from './strength'; +type zxcvbnFN = (password: string, userInputs?: (string | number)[]) => ZxcvbnResult; + export type UsePasswordConfig = PasswordSettingsData & { validatePassword: boolean; }; @@ -17,7 +23,11 @@ export type UsePasswordCbs = { onValidationComplexity?: (b: boolean) => void; }; -export const createValidatePassword = (config: UsePasswordConfig, callbacks?: ValidatePasswordCallbacks) => { +export const createValidatePassword = ( + loadZxcvbn: () => Promise, + config: UsePasswordConfig, + callbacks?: ValidatePasswordCallbacks, +) => { const { onValidation = noop, onValidationComplexity = noop } = callbacks || {}; const { show_zxcvbn, validatePassword: validatePasswordProp } = config; const getComplexity = createValidateComplexity(config); diff --git a/packages/clerk-js/src/utils/passwords/strength.ts b/packages/shared/src/internal/clerk-js/passwords/strength.ts similarity index 93% rename from packages/clerk-js/src/utils/passwords/strength.ts rename to packages/shared/src/internal/clerk-js/passwords/strength.ts index 0009b1cf9ac..9ff599981cd 100644 --- a/packages/clerk-js/src/utils/passwords/strength.ts +++ b/packages/shared/src/internal/clerk-js/passwords/strength.ts @@ -1,6 +1,6 @@ import type { PasswordSettingsData, ZxcvbnResult } from '@clerk/shared/types'; -import type { zxcvbnFN } from '../zxcvbn'; +type zxcvbnFN = (password: string, userInputs?: (string | number)[]) => ZxcvbnResult; type PasswordStrength = | { diff --git a/packages/clerk-js/src/utils/path.ts b/packages/shared/src/internal/clerk-js/path.ts similarity index 100% rename from packages/clerk-js/src/utils/path.ts rename to packages/shared/src/internal/clerk-js/path.ts diff --git a/packages/clerk-js/src/utils/getClerkQueryParam.ts b/packages/shared/src/internal/clerk-js/queryParams.ts similarity index 92% rename from packages/clerk-js/src/utils/getClerkQueryParam.ts rename to packages/shared/src/internal/clerk-js/queryParams.ts index 69a44b6df12..8bea94a7c9b 100644 --- a/packages/clerk-js/src/utils/getClerkQueryParam.ts +++ b/packages/shared/src/internal/clerk-js/queryParams.ts @@ -1,7 +1,6 @@ -import type { EmailLinkErrorCodeStatus } from '@clerk/shared/error'; -import { CLERK_NETLIFY_CACHE_BUST_PARAM } from '@clerk/shared/netlifyCacheHandler'; - -import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED } from '../core/constants'; +import type { EmailLinkErrorCodeStatus } from '../../error'; +import { CLERK_NETLIFY_CACHE_BUST_PARAM } from '../../netlifyCacheHandler'; +import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED } from './constants'; const _ClerkQueryParams = [ '__clerk_status', @@ -34,11 +33,17 @@ type ClerkQueryParamsToValuesMap = { __clerk_status: TicketStatus | VerifyTokenStatus; } & Record<(typeof _ClerkQueryParams)[number], string>; +/** + * + */ export function getClerkQueryParam(param: T): ClerkQueryParamsToValuesMap[T] | null { const val = new URL(window.location.href).searchParams.get(param); return val ? (val as ClerkQueryParamsToValuesMap[T]) : null; } +/** + * + */ export function removeClerkQueryParam(param: T) { const url = new URL(window.location.href); if (url.searchParams.has(param)) { diff --git a/packages/clerk-js/src/utils/queryStateParams.ts b/packages/shared/src/internal/clerk-js/queryStateParams.ts similarity index 78% rename from packages/clerk-js/src/utils/queryStateParams.ts rename to packages/shared/src/internal/clerk-js/queryStateParams.ts index 3cf8559213e..6aa496e9c95 100644 --- a/packages/clerk-js/src/utils/queryStateParams.ts +++ b/packages/shared/src/internal/clerk-js/queryStateParams.ts @@ -1,13 +1,6 @@ -import { CLERK_MODAL_STATE } from '../core/constants'; -import { encodeB64, getClerkQueryParam } from '../utils'; - -export const buildVirtualRouterUrl = ({ base, path }: { base: string; path: string | undefined }) => { - if (!path) { - return base; - } - - return base + path; -}; +import { CLERK_MODAL_STATE } from './constants'; +import { encodeB64 } from './encoders'; +import { getClerkQueryParam } from './queryParams'; export const readStateParam = () => { const urlClerkState = getClerkQueryParam(CLERK_MODAL_STATE) ?? ''; diff --git a/packages/clerk-js/src/utils/querystring.ts b/packages/shared/src/internal/clerk-js/querystring.ts similarity index 100% rename from packages/clerk-js/src/utils/querystring.ts rename to packages/shared/src/internal/clerk-js/querystring.ts diff --git a/packages/clerk-js/src/utils/redirectUrls.ts b/packages/shared/src/internal/clerk-js/redirectUrls.ts similarity index 97% rename from packages/clerk-js/src/utils/redirectUrls.ts rename to packages/shared/src/internal/clerk-js/redirectUrls.ts index fd7d34a5d9a..055e6984ec1 100644 --- a/packages/clerk-js/src/utils/redirectUrls.ts +++ b/packages/shared/src/internal/clerk-js/redirectUrls.ts @@ -1,7 +1,6 @@ -import { applyFunctionToObj, filterProps, removeUndefined } from '@clerk/shared/object'; -import type { ClerkOptions, RedirectOptions } from '@clerk/shared/types'; -import { camelToSnake } from '@clerk/shared/underscore'; - +import { applyFunctionToObj, filterProps, removeUndefined } from '../../object'; +import type { ClerkOptions, RedirectOptions } from '../../types'; +import { camelToSnake } from '../../underscore'; import { assertNoLegacyProp, warnForNewPropShadowingLegacyProp } from './assertNoLegacyProp'; import { isAllowedRedirect, relativeToAbsoluteUrl } from './url'; diff --git a/packages/clerk-js/src/utils/runtime.ts b/packages/shared/src/internal/clerk-js/runtime.ts similarity index 100% rename from packages/clerk-js/src/utils/runtime.ts rename to packages/shared/src/internal/clerk-js/runtime.ts diff --git a/packages/clerk-js/src/core/sessionTasks.ts b/packages/shared/src/internal/clerk-js/sessionTasks.ts similarity index 93% rename from packages/clerk-js/src/core/sessionTasks.ts rename to packages/shared/src/internal/clerk-js/sessionTasks.ts index 7713ee53eb3..9190465e92e 100644 --- a/packages/clerk-js/src/core/sessionTasks.ts +++ b/packages/shared/src/internal/clerk-js/sessionTasks.ts @@ -1,7 +1,8 @@ -import { logger } from '@clerk/shared/logger'; import type { ClerkOptions, SessionResource, SessionTask, SetActiveParams } from '@clerk/shared/types'; -import { buildURL, forwardClerkQueryParams } from '../utils'; +import { logger } from '../../logger'; +import { forwardClerkQueryParams } from './queryParams'; +import { buildURL } from './url'; /** * @internal diff --git a/packages/clerk-js/src/utils/url.ts b/packages/shared/src/internal/clerk-js/url.ts similarity index 95% rename from packages/clerk-js/src/utils/url.ts rename to packages/shared/src/internal/clerk-js/url.ts index 4cd2e465cbd..96ae3b279f3 100644 --- a/packages/clerk-js/src/utils/url.ts +++ b/packages/shared/src/internal/clerk-js/url.ts @@ -1,10 +1,10 @@ -import { globs } from '@clerk/shared/globs'; -import { createDevOrStagingUrlCache } from '@clerk/shared/keys'; -import { logger } from '@clerk/shared/logger'; import type { SignUpResource } from '@clerk/shared/types'; -import { camelToSnake } from '@clerk/shared/underscore'; -import { isCurrentDevAccountPortalOrigin, isLegacyDevAccountPortalOrigin } from '@clerk/shared/url'; +import { globs } from '../../globs'; +import { createDevOrStagingUrlCache } from '../../keys'; +import { logger } from '../../logger'; +import { camelToSnake } from '../../underscore'; +import { isCurrentDevAccountPortalOrigin, isLegacyDevAccountPortalOrigin } from '../../url'; import { joinPaths } from './path'; import { getQueryParams } from './querystring'; @@ -72,9 +72,9 @@ interface BuildURLOptions { * References: * https://developer.mozilla.org/en-US/docs/Web/API/URL * - * @param {BuildURLParams} params - * @param {BuildURLOptions} options - * @returns {URL | string} Returns the URL href + * @param params + * @param options + * @returns Returns the URL href */ export function buildURL( params: BuildURLParams, @@ -170,8 +170,8 @@ export function toURL(url: string | URL): URL { * References: * https://developer.mozilla.org/en-US/docs/Web/API/URL * - * @param {URL | string} url - * @returns {string} Returns the URL href without the origin + * @param url + * @returns Returns the URL href without the origin */ export function stripOrigin(url: URL | string): string { // In non-browser environments `window.location.origin` might not be available @@ -190,7 +190,8 @@ export function stripOrigin(url: URL | string): string { * * Strips the trailing slashes from a string * - * @returns {string} Returns the string without trailing slashes + * @returns Returns the string without trailing slashes + * * @param path */ export const trimTrailingSlash = (path: string): string => { @@ -202,7 +203,8 @@ export const trimTrailingSlash = (path: string): string => { * * Strips the leading slashes from a string * - * @returns {string} Returns the string without leading slashes + * @returns Returns the string without leading slashes + * * @param path */ export const trimLeadingSlash = (path: string): string => { @@ -226,7 +228,7 @@ export function getSearchParameterFromHash({ return dummyUrlForHash.searchParams.get(paramName); } -export function isValidUrl(val: unknown): val is string { +export function isValidUrl(val: unknown) { if (!val) { return false; } diff --git a/packages/clerk-js/src/utils/user.ts b/packages/shared/src/internal/clerk-js/user.ts similarity index 100% rename from packages/clerk-js/src/utils/user.ts rename to packages/shared/src/internal/clerk-js/user.ts index 75a57ec274a..edb1d08ecde 100644 --- a/packages/clerk-js/src/utils/user.ts +++ b/packages/shared/src/internal/clerk-js/user.ts @@ -1,3 +1,5 @@ +import type { UserResource } from '@clerk/shared/types'; + type NameHelperParams = { firstName?: string | null; lastName?: string | null; @@ -10,8 +12,6 @@ export const getFullName = ({ firstName, lastName, name }: NameHelperParams) => export const getInitials = ({ firstName, lastName, name }: NameHelperParams) => [(firstName || '')[0], (lastName || '')[0]].join('').trim() || (name || '')[0]; -import type { UserResource } from '@clerk/shared/types'; - export const getIdentifier = (user: Partial): string => { if (user.username) { return user.username; diff --git a/packages/shared/src/internal/clerk-js/warnings.ts b/packages/shared/src/internal/clerk-js/warnings.ts new file mode 100644 index 00000000000..1d001112280 --- /dev/null +++ b/packages/shared/src/internal/clerk-js/warnings.ts @@ -0,0 +1,63 @@ +import type { Serializable } from '@clerk/shared/types'; + +const formatWarning = (msg: string) => { + return `🔒 Clerk:\n${msg.trim()}\n(This notice only appears in development)`; +}; + +const createMessageForDisabledOrganizations = ( + componentName: + | 'OrganizationProfile' + | 'OrganizationSwitcher' + | 'OrganizationList' + | 'CreateOrganization' + | 'TaskChooseOrganization', +) => { + return formatWarning( + `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`, + ); +}; +const createMessageForDisabledBilling = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => { + return formatWarning( + `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable billing. Since billing is disabled, this is no-op.`, + ); +}; +const warnings = { + cannotRenderComponentWhenSessionExists: + 'The and components cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the Home URL instead.', + cannotRenderSignUpComponentWhenSessionExists: + 'The component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the value set in `afterSignUp` URL instead.', + cannotRenderSignUpComponentWhenTaskExists: + 'The component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.', + cannotRenderComponentWhenTaskDoesNotExist: + ' cannot render unless a session task is pending. Clerk is redirecting to the value set in `redirectUrlComplete` instead.', + cannotRenderSignInComponentWhenSessionExists: + 'The component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead.', + cannotRenderSignInComponentWhenTaskExists: + 'The component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.', + cannotRenderComponentWhenUserDoesNotExist: + ' cannot render unless a user is signed in. Since no user is signed in, this is no-op.', + cannotRenderComponentWhenOrgDoesNotExist: ` cannot render unless an organization is active. Since no organization is currently active, this is no-op.`, + cannotRenderAnyOrganizationComponent: createMessageForDisabledOrganizations, + cannotRenderAnyBillingComponent: createMessageForDisabledBilling, + cannotOpenUserProfile: + 'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.', + cannotOpenCheckout: + 'The Checkout drawer cannot render unless a user is signed in. Since no user is signed in, this is no-op.', + cannotOpenSignInOrSignUp: + 'The SignIn or SignUp modals do not render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, this is no-op.', + cannotRenderAPIKeysComponent: + 'The component cannot be rendered when API keys is disabled. Since API keys is disabled, this is no-op.', + cannotRenderAPIKeysComponentForOrgWhenUnauthorized: + 'The component cannot be rendered for an organization unless a user has the required permissions. Since the user does not have the necessary permissions, this is no-op.', +}; + +type SerializableWarnings = Serializable; + +for (const key of Object.keys(warnings)) { + const item = warnings[key as keyof typeof warnings]; + if (typeof item !== 'function') { + warnings[key as keyof SerializableWarnings] = formatWarning(item); + } +} + +export { warnings }; diff --git a/packages/clerk-js/src/utils/web3.ts b/packages/shared/src/internal/clerk-js/web3.ts similarity index 98% rename from packages/clerk-js/src/utils/web3.ts rename to packages/shared/src/internal/clerk-js/web3.ts index fc494876f78..28450bff8e4 100644 --- a/packages/clerk-js/src/utils/web3.ts +++ b/packages/shared/src/internal/clerk-js/web3.ts @@ -1,7 +1,6 @@ import type { Web3Provider } from '@clerk/shared/types'; -import { clerkUnsupportedEnvironmentWarning } from '@/core/errors'; - +import { clerkUnsupportedEnvironmentWarning } from './errors'; import { toHex } from './hex'; import { getInjectedWeb3Providers } from './injectedWeb3Providers'; diff --git a/packages/clerk-js/src/utils/windowNavigate.ts b/packages/shared/src/internal/clerk-js/windowNavigate.ts similarity index 100% rename from packages/clerk-js/src/utils/windowNavigate.ts rename to packages/shared/src/internal/clerk-js/windowNavigate.ts diff --git a/packages/shared/src/loadClerkJsScript.ts b/packages/shared/src/loadClerkJsScript.ts index d9bd96b8ba2..b7b821e3a3c 100644 --- a/packages/shared/src/loadClerkJsScript.ts +++ b/packages/shared/src/loadClerkJsScript.ts @@ -6,28 +6,11 @@ import type { ClerkOptions, SDKMetadata, Without } from './types'; import { addClerkPrefix } from './url'; import { versionSelector } from './versionSelector'; -const ERROR_CODE = 'failed_to_load_clerk_js'; -const ERROR_CODE_TIMEOUT = 'failed_to_load_clerk_js_timeout'; -const FAILED_TO_LOAD_ERROR = 'Failed to load Clerk'; - const { isDevOrStagingUrl } = createDevOrStagingUrlCache(); const errorThrower = buildErrorThrower({ packageName: '@clerk/shared' }); -/** - * Sets the package name for error messages during ClerkJS script loading. - * - * @param packageName - The name of the package to use in error messages (e.g., '@clerk/react'). - * @example - * ```typescript - * setClerkJsLoadingErrorPackageName('@clerk/react'); - * ``` - */ -export function setClerkJsLoadingErrorPackageName(packageName: string) { - errorThrower.setPackageName({ packageName }); -} - -type LoadClerkJsScriptOptions = Without & { +export type LoadClerkJsScriptOptions = Without & { publishableKey: string; clerkJSUrl?: string; clerkJSVariant?: 'headless' | ''; @@ -44,78 +27,32 @@ type LoadClerkJsScriptOptions = Without & { scriptLoadTimeout?: number; }; +export type LoadClerkUiScriptOptions = Without & { + publishableKey: string; + clerkUiUrl?: string; + proxyUrl?: string; + domain?: string; + nonce?: string; + scriptLoadTimeout?: number; +}; + /** * Validates that window.Clerk exists and is properly initialized. * This ensures we don't have false positives where the script loads but Clerk is malformed. * * @returns `true` if window.Clerk exists and has the expected structure with a load method. */ -function isClerkProperlyLoaded(): boolean { - if (typeof window === 'undefined' || !(window as any).Clerk) { +function isClerkGlobalProperlyLoaded(prop: 'Clerk' | '__unstable_ClerkUi'): boolean { + if (typeof window === 'undefined' || !(window as any)[prop]) { return false; } // Basic validation that window.Clerk has the expected structure - const clerk = (window as any).Clerk; - return typeof clerk === 'object' && typeof clerk.load === 'function'; -} - -/** - * Waits for Clerk to be properly loaded with a timeout mechanism. - * Uses polling to check if Clerk becomes available within the specified timeout. - * - * @param timeoutMs - Maximum time to wait in milliseconds. - * @returns Promise that resolves with null if Clerk loads successfully, or rejects with an error if timeout is reached. - */ -function waitForClerkWithTimeout(timeoutMs: number): Promise { - return new Promise((resolve, reject) => { - let resolved = false; - - const cleanup = (timeoutId: ReturnType, pollInterval: ReturnType) => { - clearTimeout(timeoutId); - clearInterval(pollInterval); - }; - - const checkAndResolve = () => { - if (resolved) { - return; - } - - if (isClerkProperlyLoaded()) { - resolved = true; - cleanup(timeoutId, pollInterval); - resolve(null); - } - }; - - const handleTimeout = () => { - if (resolved) { - return; - } - - resolved = true; - cleanup(timeoutId, pollInterval); - - if (!isClerkProperlyLoaded()) { - reject(new ClerkRuntimeError(FAILED_TO_LOAD_ERROR, { code: ERROR_CODE_TIMEOUT })); - } else { - resolve(null); - } - }; - - const timeoutId = setTimeout(handleTimeout, timeoutMs); - - checkAndResolve(); - - const pollInterval = setInterval(() => { - if (resolved) { - clearInterval(pollInterval); - return; - } - checkAndResolve(); - }, 100); - }); + const val = (window as any)[prop]; + return typeof val === 'object' && (val.load ? typeof val.load === 'function' : true); } +const isClerkProperlyLoaded = () => isClerkGlobalProperlyLoaded('Clerk'); +const isClerkUiProperlyLoaded = () => isClerkGlobalProperlyLoaded('__unstable_ClerkUi'); /** * Hotloads the Clerk JS script with robust failure detection. @@ -138,8 +75,13 @@ function waitForClerkWithTimeout(timeoutMs: number): Promise => { +export const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promise => { const timeout = opts?.scriptLoadTimeout ?? 15000; + const rejectWith = (error?: Error) => + new ClerkRuntimeError('Failed to load Clerk JS' + (error?.message ? `, ${error.message}` : ''), { + code: 'failed_to_load_clerk_js', + cause: error, + }); if (isClerkProperlyLoaded()) { return null; @@ -148,7 +90,7 @@ const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promise('script[data-clerk-js-script]'); if (existingScript) { - return waitForClerkWithTimeout(timeout); + return waitForPredicateWithTimeout(timeout, isClerkProperlyLoaded, rejectWith()); } if (!opts?.publishableKey) { @@ -156,7 +98,7 @@ const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promise { - throw new ClerkRuntimeError(FAILED_TO_LOAD_ERROR + (error.message ? `, ${error.message}` : ''), { - code: ERROR_CODE, + throw rejectWith(error); + }); + + return loadPromise; +}; + +export const loadClerkUiScript = async (opts?: LoadClerkUiScriptOptions): Promise => { + console.log('here?'); + + const timeout = opts?.scriptLoadTimeout ?? 15000; + const rejectWith = (error?: Error) => + new ClerkRuntimeError('Failed to load Clerk UI' + (error?.message ? `, ${error.message}` : ''), { + code: 'failed_to_load_clerk_ui', cause: error, }); + + if (isClerkUiProperlyLoaded()) { + return null; + } + + const existingScript = document.querySelector('script[data-clerk-ui-script]'); + + if (existingScript) { + return waitForPredicateWithTimeout(timeout, isClerkUiProperlyLoaded, rejectWith()); + } + + if (!opts?.publishableKey) { + errorThrower.throwMissingPublishableKeyError(); + return null; + } + + const loadPromise = waitForPredicateWithTimeout(timeout, isClerkUiProperlyLoaded, rejectWith()); + loadScript(clerkUiScriptUrl(opts), { + async: true, + crossOrigin: 'anonymous', + nonce: opts.nonce, + }).catch(error => { + console.log('nikos 2', error); + throw rejectWith(error); }); return loadPromise; }; -/** - * Generates a Clerk JS script URL based on the provided options. - * - * @param opts - The options to use when building the Clerk JS script URL. - * @returns The complete URL to the Clerk JS script. - * - * @example - * ```typescript - * const url = clerkJsScriptUrl({ publishableKey: 'pk_test_...' }); - * // Returns: "https://example.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js" - * ``` - */ -const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => { +export const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => { const { clerkJSUrl, clerkJSVariant, clerkJSVersion, proxyUrl, domain, publishableKey } = opts; if (clerkJSUrl) { return clerkJSUrl; } - let scriptHost = ''; - if (!!proxyUrl && isValidProxyUrl(proxyUrl)) { - scriptHost = proxyUrlToAbsoluteURL(proxyUrl).replace(/http(s)?:\/\//, ''); - } else if (domain && !isDevOrStagingUrl(parsePublishableKey(publishableKey)?.frontendApi || '')) { - scriptHost = addClerkPrefix(domain); - } else { - scriptHost = parsePublishableKey(publishableKey)?.frontendApi || ''; - } - + const scriptHost = buildScriptHost({ publishableKey, proxyUrl, domain }); const variant = clerkJSVariant ? `${clerkJSVariant.replace(/\.+$/, '')}.` : ''; const version = versionSelector(clerkJSVersion); return `https://${scriptHost}/npm/@clerk/clerk-js@${version}/dist/clerk.${variant}browser.js`; }; -/** - * Builds an object of Clerk JS script attributes based on the provided options. - * - * @param options - The options containing the values for script attributes. - * @returns An object containing data attributes to be applied to the script element. - */ -const buildClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => { +export const clerkUiScriptUrl = (opts: LoadClerkUiScriptOptions) => { + const { clerkUiUrl, proxyUrl, domain, publishableKey } = opts; + + if (clerkUiUrl) { + console.log('got clerk ui url', clerkUiUrl); + + return clerkUiUrl; + } + + const scriptHost = buildScriptHost({ publishableKey, proxyUrl, domain }); + // TODO @nikos add version selector + return `https://${scriptHost}/npm/@clerk/ui@latest/dist/ui.browser.js`; +}; + +export const buildClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => { const obj: Record = {}; if (options.publishableKey) { @@ -234,12 +199,6 @@ const buildClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => { return obj; }; -/** - * Returns a function that applies Clerk JS script attributes to a script element. - * - * @param options - The options containing the values for script attributes. - * @returns A function that accepts a script element and applies the attributes to it. - */ const applyClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => (script: HTMLScriptElement) => { const attributes = buildClerkJsScriptAttributes(options); for (const attribute in attributes) { @@ -247,5 +206,72 @@ const applyClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => (scr } }; -export { buildClerkJsScriptAttributes, clerkJsScriptUrl, loadClerkJsScript }; -export type { LoadClerkJsScriptOptions }; +export const buildScriptHost = (opts: { publishableKey: string; proxyUrl?: string; domain?: string }) => { + const { proxyUrl, domain, publishableKey } = opts; + + if (!!proxyUrl && isValidProxyUrl(proxyUrl)) { + return proxyUrlToAbsoluteURL(proxyUrl).replace(/http(s)?:\/\//, ''); + } else if (domain && !isDevOrStagingUrl(parsePublishableKey(publishableKey)?.frontendApi || '')) { + return addClerkPrefix(domain); + } else { + return parsePublishableKey(publishableKey)?.frontendApi || ''; + } +}; + +function waitForPredicateWithTimeout( + timeoutMs: number, + predicate: () => boolean, + rejectWith: Error, +): Promise { + return new Promise((resolve, reject) => { + let resolved = false; + + const cleanup = (timeoutId: ReturnType, pollInterval: ReturnType) => { + clearTimeout(timeoutId); + clearInterval(pollInterval); + }; + + const checkAndResolve = () => { + if (resolved) { + return; + } + + if (predicate()) { + resolved = true; + cleanup(timeoutId, pollInterval); + resolve(null); + } + }; + + const handleTimeout = () => { + if (resolved) { + return; + } + + resolved = true; + cleanup(timeoutId, pollInterval); + + if (!predicate()) { + reject(rejectWith); + } else { + resolve(null); + } + }; + + const timeoutId = setTimeout(handleTimeout, timeoutMs); + + checkAndResolve(); + + const pollInterval = setInterval(() => { + if (resolved) { + clearInterval(pollInterval); + return; + } + checkAndResolve(); + }, 100); + }); +} + +export function setClerkJsLoadingErrorPackageName(packageName: string) { + errorThrower.setPackageName({ packageName }); +} diff --git a/packages/shared/src/loadScript.ts b/packages/shared/src/loadScript.ts index fe8124d3997..c9fc4a4536d 100644 --- a/packages/shared/src/loadScript.ts +++ b/packages/shared/src/loadScript.ts @@ -36,6 +36,8 @@ export async function loadScript(src = '', opts: LoadScriptOptions): Promise { + console.log('this loaded ', src); + script.remove(); resolve(script); }); @@ -52,5 +54,10 @@ export async function loadScript(src = '', opts: LoadScriptOptions): Promise iterations <= 5 }); + return retry(load, { + shouldRetry: (_, iterations) => { + console.log('nikos 3', _, iterations); + return iterations <= 5; + }, + }); } diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts index 0d2d3bdbf12..4c1e6ec6bef 100644 --- a/packages/shared/src/utils/index.ts +++ b/packages/shared/src/utils/index.ts @@ -5,4 +5,5 @@ export { logErrorInDevMode } from './logErrorInDevMode'; export { noop } from './noop'; export * from './runtimeEnvironment'; export { handleValueOrFn } from './handleValueOrFn'; +export { runIfFunctionOrReturn } from './runIfFunctionOrReturn'; export { fastDeepMergeAndReplace, fastDeepMergeAndKeep } from './fastDeepMerge'; diff --git a/packages/clerk-js/src/utils/props.ts b/packages/shared/src/utils/runIfFunctionOrReturn.ts similarity index 91% rename from packages/clerk-js/src/utils/props.ts rename to packages/shared/src/utils/runIfFunctionOrReturn.ts index 8bc180f3e81..64205afdb50 100644 --- a/packages/clerk-js/src/utils/props.ts +++ b/packages/shared/src/utils/runIfFunctionOrReturn.ts @@ -1,3 +1,6 @@ +/** + * + */ export function runIfFunctionOrReturn(o: unknown) { if (typeof o === 'function') { return o(); diff --git a/packages/shared/tsdown.config.mts b/packages/shared/tsdown.config.mts index 6a559c60060..1c366aa311a 100644 --- a/packages/shared/tsdown.config.mts +++ b/packages/shared/tsdown.config.mts @@ -8,7 +8,7 @@ export default defineConfig(({ watch }) => { const common = { dts: true, sourcemap: true, - clean: true, + clean: false, target: 'es2022', platform: 'neutral', external: ['react', 'react-dom'], @@ -19,6 +19,7 @@ export default defineConfig(({ watch }) => { PACKAGE_VERSION: `"${sharedPackage.version}"`, JS_PACKAGE_VERSION: `"${clerkJsPackage.version}"`, __DEV__: `${watch}`, + __BUILD_DISABLE_RHC__: JSON.stringify(false), }, } satisfies Options; @@ -41,6 +42,8 @@ export default defineConfig(({ watch }) => { './src/workerTimers/index.ts', './src/types/index.ts', './src/dom/*.ts', + './src/internal/clerk-js/*.ts', + './src/internal/clerk-js/**/*.ts', '!./src/**/*.{test,spec}.{ts,tsx}', ], outDir: './dist/runtime', diff --git a/packages/themes/src/createTheme.ts b/packages/themes/src/createTheme.ts index e5bccc19df7..48c1e95ccec 100644 --- a/packages/themes/src/createTheme.ts +++ b/packages/themes/src/createTheme.ts @@ -2,7 +2,7 @@ // theming into its own package import type { BaseTheme, DeepPartial, Elements, Theme } from '@clerk/shared/types'; -import type { InternalTheme } from '../../clerk-js/src/ui/foundations'; +import type { InternalTheme } from '../../ui/src/foundations'; interface CreateClerkThemeParams extends DeepPartial, Pick { /** diff --git a/packages/ui/bundlewatch-fix.mjs b/packages/ui/bundlewatch-fix.mjs new file mode 100644 index 00000000000..ab20dbc3eb6 --- /dev/null +++ b/packages/ui/bundlewatch-fix.mjs @@ -0,0 +1,26 @@ +import { writeFile } from 'node:fs/promises'; +import bundlewatch from 'bundlewatch'; +import { minimatch } from 'minimatch'; +import { format } from 'prettier'; +import { $ } from 'zx'; +import bundlewatchConfig from './bundlewatch.config.json' with { type: 'json' }; + +const { fullResults } = await bundlewatch.default(bundlewatchConfig); +const failedFiles = fullResults.filter(result => result.status === 'fail'); + +for (const file of failedFiles) { + const matchingFileIndex = bundlewatchConfig.files.findIndex(f => { + return minimatch(file.filePath, f.path); + }); + if (matchingFileIndex !== -1) { + // update maxSize to the file size plus 1KB, rounded up to the nearest KB + bundlewatchConfig.files[matchingFileIndex].maxSize = `${Math.ceil((file.size + 1024) / 1024)}KB`; + } +} + +const formattedConfig = await format(JSON.stringify(bundlewatchConfig), { parser: 'json' }); +await writeFile('./bundlewatch.config.json', formattedConfig); +// print the git diff of the bundlewatch.config.json file +const diff = await $`git -c color.ui=always --no-pager diff bundlewatch.config.json`.then(res => res.stdout); +console.log(diff); +console.log('Bundlewatch config updated!'); diff --git a/packages/ui/bundlewatch.config.json b/packages/ui/bundlewatch.config.json new file mode 100644 index 00000000000..e952bb2b7cc --- /dev/null +++ b/packages/ui/bundlewatch.config.json @@ -0,0 +1,17 @@ +{ + "files": [ + { "path": "./dist/browser/ui.browser.js", "maxSize": "10KB" }, + { "path": "./dist/browser/framework.js", "maxSize": "150KB" }, + { "path": "./dist/browser/emotion-vendor.js", "maxSize": "80KB" }, + { "path": "./dist/browser/floating-ui-vendor*.js", "maxSize": "30KB" }, + { "path": "./dist/browser/vendors*.js", "maxSize": "40KB" }, + { "path": "./dist/browser/zxcvbn-ts-core*.js", "maxSize": "45KB" }, + { "path": "./dist/browser/zxcvbn-common*.js", "maxSize": "30KB" }, + { "path": "./dist/browser/signup*.js", "maxSize": "10KB" }, + { "path": "./dist/browser/signin*.js", "maxSize": "20KB" }, + { "path": "./dist/browser/user-profile*.js", "maxSize": "15KB" }, + { "path": "./dist/browser/organization-profile*.js", "maxSize": "10KB" }, + { "path": "./dist/browser/user-button*.js", "maxSize": "5KB" }, + { "path": "./dist/browser/organization-switcher*.js", "maxSize": "5KB" } + ] +} diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 00000000000..a93ad8687ec --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,88 @@ +{ + "name": "@clerk/ui", + "version": "0.0.1", + "description": "Internal package that contains the UI components for the Clerk frontend SDKs", + "repository": { + "type": "git", + "url": "git+https://github.com/clerk/javascript.git", + "directory": "packages/ui" + }, + "license": "MIT", + "author": "Clerk", + "sideEffects": false, + "exports": { + ".": { + "types": "./dist/types/index.d.ts", + "import": "./dist/ui.mjs", + "require": "./dist/ui.js", + "default": "./dist/ui.mjs" + }, + "./internal": { + "types": "./dist/types/internal.d.ts", + "import": "./dist/ui.mjs", + "require": "./dist/ui.js", + "default": "./dist/ui.mjs" + }, + "./package.json": "./package.json" + }, + "types": "dist/types/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "pnpm build:bundle && pnpm build:declarations", + "build:analyze": "rspack build --config rspack.config.js --env production --analyze", + "build:bundle": "rspack build --config rspack.config.js --env production", + "build:declarations": "tsc -p tsconfig.declarations.json", + "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json", + "bundlewatch:fix": "node bundlewatch-fix.mjs", + "clean": "rimraf ./dist", + "dev": "rspack serve --config rspack.config.js", + "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4001}", + "format": "node ../../scripts/format-package.mjs", + "format:check": "node ../../scripts/format-package.mjs --check", + "lint": "eslint src", + "lint:attw": "attw --pack . --profile node16", + "lint:publint": "publint", + "showerrors": "tsc", + "test": "vitest", + "test:ci": "vitest --maxWorkers=70%", + "test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html" + }, + "dependencies": { + "@clerk/localizations": "workspace:^", + "@clerk/shared": "workspace:^", + "@emotion/cache": "11.11.0", + "@emotion/react": "11.11.1", + "@floating-ui/react": "0.27.12", + "@formkit/auto-animate": "^0.8.2", + "@zxcvbn-ts/core": "3.0.4", + "@zxcvbn-ts/language-common": "3.0.4", + "copy-to-clipboard": "3.3.3", + "csstype": "3.1.3", + "dequal": "2.0.3", + "input-otp": "1.4.2", + "qrcode.react": "4.2.0", + "react": "catalog:peer-react", + "react-dom": "catalog:peer-react", + "swr": "2.3.4" + }, + "devDependencies": { + "@rspack/cli": "^1.4.11", + "@rspack/core": "^1.4.11", + "@rspack/plugin-react-refresh": "^1.5.0", + "@stripe/react-stripe-js": "3.1.1", + "@stripe/stripe-js": "5.6.0", + "@svgr/webpack": "^6.5.1", + "@types/webpack-env": "^1.18.8", + "bundlewatch": "^0.4.1", + "cross-fetch": "^4.1.0", + "webpack-merge": "^5.10.0" + }, + "engines": { + "node": ">=20.9.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/ui/rspack.config.js b/packages/ui/rspack.config.js new file mode 100644 index 00000000000..a554fcf0e59 --- /dev/null +++ b/packages/ui/rspack.config.js @@ -0,0 +1,320 @@ +// @ts-check +const rspack = require('@rspack/core'); +const packageJSON = require('./package.json'); +const path = require('path'); +const { merge } = require('webpack-merge'); +const ReactRefreshPlugin = require('@rspack/plugin-react-refresh'); +const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common'); + +const isProduction = mode => mode === 'production'; +const isDevelopment = mode => !isProduction(mode); + +const variants = { + uiBrowser: 'ui.browser', + ui: 'ui', +}; + +const variantToSourceFile = { + [variants.uiBrowser]: './src/index.browser.ts', + [variants.ui]: './src/index.ts', +}; + +/** + * Common configuration for all builds + * @param {object} config + * @param {'development'|'production'} config.mode + * @param {string} config.variant + * @returns {import('@rspack/core').Configuration} + */ +const common = ({ mode, variant }) => { + return { + mode, + resolve: { + alias: { + '@/ui': path.resolve(__dirname, './src'), + '@': path.resolve(__dirname, './src'), + }, + extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'], + }, + plugins: [ + new rspack.DefinePlugin({ + __DEV__: isDevelopment(mode), + PACKAGE_VERSION: JSON.stringify(packageJSON.version), + __PKG_VERSION__: JSON.stringify(packageJSON.version), + PACKAGE_NAME: JSON.stringify(packageJSON.name), + }), + new rspack.EnvironmentPlugin({ + NODE_ENV: mode, + }), + ].filter(Boolean), + output: { + chunkFilename: `[name]_ui_[fullhash:6]_${packageJSON.version}.js`, + }, + optimization: { + splitChunks: { + cacheGroups: { + // Component-specific chunks + signUp: { + test: /[\\/]src[\\/]components[\\/]SignUp[\\/]/, + name: 'signup', + chunks: 'all', + priority: 10, + }, + signIn: { + test: /[\\/]src[\\/]components[\\/]SignIn[\\/]/, + name: 'signin', + chunks: 'all', + priority: 10, + }, + userProfile: { + test: /[\\/]src[\\/]components[\\/]UserProfile[\\/]/, + name: 'user-profile', + chunks: 'all', + priority: 10, + }, + organizationProfile: { + test: /[\\/]src[\\/]components[\\/]OrganizationProfile[\\/]/, + name: 'organization-profile', + chunks: 'all', + priority: 10, + }, + userButton: { + test: /[\\/]src[\\/]components[\\/]UserButton[\\/]/, + name: 'user-button', + chunks: 'all', + priority: 10, + }, + organizationSwitcher: { + test: /[\\/]src[\\/]components[\\/]OrganizationSwitcher[\\/]/, + name: 'organization-switcher', + chunks: 'all', + priority: 10, + }, + // Vendor chunks + zxcvbnTSCoreVendor: { + test: /[\\/]node_modules[\\/](@zxcvbn-ts\/core|fastest-levenshtein)[\\/]/, + name: 'zxcvbn-ts-core', + chunks: 'all', + }, + zxcvbnTSCommonVendor: { + test: /[\\/]node_modules[\\/](@zxcvbn-ts)[\\/](language-common)[\\/]/, + name: 'zxcvbn-common', + chunks: 'all', + }, + emotionVendor: { + test: /[\\/]node_modules[\\/](@emotion)[\\/]/, + name: 'emotion-vendor', + chunks: 'all', + priority: 20, + }, + floatingUIVendor: { + test: /[\\/]node_modules[\\/](@floating-ui)[\\/]/, + name: 'floating-ui-vendor', + chunks: 'all', + }, + stripeVendor: { + test: /[\\/]node_modules[\\/](@stripe)[\\/]/, + name: 'stripe-vendor', + chunks: 'all', + }, + defaultVendors: { + minChunks: 1, + test: /[\\/]node_modules[\\/]/, + name: 'vendors', + priority: -10, + }, + react: { + chunks: 'all', + test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/, + name: 'framework', + priority: 40, + enforce: true, + }, + }, + }, + }, + // Disable Rspack's warnings since we use bundlewatch + ignoreWarnings: [/entrypoint size limit/, /asset size limit/, /Rspack performance recommendations/], + }; +}; + +/** + * Helper to create entry configuration for a variant + * @param {string} variant + * @returns {import('@rspack/core').Configuration} + */ +const entryForVariant = variant => { + return { entry: { [variant]: variantToSourceFile[variant] } }; +}; + +/** + * Common production configuration for chunked browser builds + * @returns {import('@rspack/core').Configuration} + */ +const commonForProdBrowser = () => { + return { + devtool: false, + output: { + path: path.resolve(__dirname, 'dist/browser'), + filename: '[name].js', + libraryTarget: 'umd', + globalObject: 'globalThis', + }, + module: { + rules: [svgLoader(), ...typescriptLoaderProd({ targets: 'last 2 years' })], + }, + optimization: { + minimize: true, + minimizer: [ + new rspack.SwcJsMinimizerRspackPlugin({ + minimizerOptions: { + compress: { + unused: true, + dead_code: true, + passes: 2, + }, + mangle: { + safari10: true, + }, + }, + }), + ], + }, + }; +}; + +/** + * Common production configuration for bundled module builds (no chunks) + * @returns {import('@rspack/core').Configuration} + */ +const commonForProdBundled = () => { + return { + devtool: false, + output: { + path: path.resolve(__dirname, 'dist'), + publicPath: '', + }, + module: { + rules: [svgLoader(), ...typescriptLoaderProd({ targets: 'last 2 years' })], + }, + optimization: { + minimize: true, + minimizer: [ + new rspack.SwcJsMinimizerRspackPlugin({ + minimizerOptions: { + compress: { + unused: true, + dead_code: true, + passes: 2, + }, + mangle: { + safari10: true, + }, + }, + }), + ], + }, + }; +}; + +/** + * Production configuration - builds multiple variants + * @param {'development'|'production'} mode + * @returns {(import('@rspack/core').Configuration)[]} + */ +const prodConfig = mode => { + // Browser bundle with chunks (UMD) + const uiBrowser = merge( + entryForVariant(variants.uiBrowser), + common({ mode, variant: variants.uiBrowser }), + commonForProdBrowser(), + ); + + // ESM module bundle (no chunks) + const uiEsm = merge(entryForVariant(variants.ui), common({ mode, variant: variants.ui }), commonForProdBundled(), { + experiments: { + outputModule: true, + }, + output: { + filename: '[name].mjs', + libraryTarget: 'module', + }, + plugins: [ + // Bundle everything into a single file for ESM + new rspack.optimize.LimitChunkCountPlugin({ + maxChunks: 1, + }), + ], + optimization: { + splitChunks: false, + }, + }); + + // CJS module bundle (no chunks) + const uiCjs = merge(entryForVariant(variants.ui), common({ mode, variant: variants.ui }), commonForProdBundled(), { + output: { + filename: '[name].js', + libraryTarget: 'commonjs', + }, + plugins: [ + // Bundle everything into a single file for CJS + new rspack.optimize.LimitChunkCountPlugin({ + maxChunks: 1, + }), + ], + optimization: { + splitChunks: false, + }, + }); + + return [uiBrowser, uiEsm, uiCjs]; +}; + +/** + * Development configuration - only builds browser bundle with dev server + * @param {'development'|'production'} mode + * @param {object} env + * @returns {import('@rspack/core').Configuration} + */ +const devConfig = (mode, env) => { + const devUrl = new URL(env.devOrigin || 'https://ui.lclclerk.com'); + const port = Number(new URL(env.devOrigin ?? 'http://localhost:4001').port || 4001); + + return merge(entryForVariant(variants.uiBrowser), common({ mode, variant: variants.uiBrowser }), { + module: { + rules: [svgLoader(), ...typescriptLoaderDev()], + }, + plugins: [new ReactRefreshPlugin({ overlay: { sockHost: devUrl.host } })], + // devtool: 'eval-cheap-source-map', + devtool: false, + output: { + publicPath: `${devUrl.origin}/npm`, + crossOriginLoading: 'anonymous', + filename: `[name].js`, + libraryTarget: 'umd', + }, + optimization: { + minimize: false, + }, + devServer: { + allowedHosts: ['all'], + headers: { 'Access-Control-Allow-Origin': '*' }, + host: '0.0.0.0', + port, + hot: true, + liveReload: false, + client: { webSocketURL: `auto://${devUrl.host}/ws` }, + }, + cache: false, + experiments: { + cache: { + type: 'memory', + }, + }, + }); +}; + +module.exports = env => { + const mode = env.production ? 'production' : 'development'; + return isProduction(mode) ? prodConfig(mode) : devConfig(mode, env); +}; diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/ui/src/Components.tsx similarity index 96% rename from packages/clerk-js/src/ui/Components.tsx rename to packages/ui/src/Components.tsx index 148736665ce..c4ec3777a10 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/ui/src/Components.tsx @@ -1,3 +1,4 @@ +import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors'; import type { __internal_CheckoutProps, __internal_PlanDetailsProps, @@ -18,10 +19,8 @@ import type { import { createDeferredPromise } from '@clerk/shared/utils'; import React, { Suspense } from 'react'; -import { clerkUIErrorDOMElementNotFound } from '../core/errors'; -import { buildVirtualRouterUrl } from '../utils'; -import { disambiguateRedirectOptions } from '../utils/disambiguateRedirectOptions'; -import type { AppearanceCascade } from './customizables/parseAppearance'; // NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size +import type { AppearanceCascade } from './customizables/parseAppearance'; +// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size import { useClerkModalStateParams } from './hooks/useClerkModalStateParams'; import type { ClerkComponentName } from './lazyModules/components'; import { @@ -47,11 +46,14 @@ import { OrganizationSwitcherPrefetch, } from './lazyModules/providers'; import type { AvailableComponentProps } from './types'; +import { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl'; +import { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions'; +import { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance'; /** * Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle. */ -export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; +const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; const ROOT_ELEMENT_ID = 'clerk-components'; @@ -179,7 +181,13 @@ function assertDOMElement(element: HTMLElement): asserts element { } } -export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentResource, options: ClerkOptions) => { +export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentResource, _options: ClerkOptions) => { + const options = { ..._options }; + // Extract cssLayerName from baseTheme if present and move it to appearance level + if (options.appearance) { + options.appearance = extractCssLayerNameFromAppearance(options.appearance); + } + // TODO: Init of components should start // before /env and /client requests let clerkRoot = document.getElementById(ROOT_ELEMENT_ID); diff --git a/packages/ui/src/Components1.tsx b/packages/ui/src/Components1.tsx new file mode 100644 index 00000000000..199264c08ec --- /dev/null +++ b/packages/ui/src/Components1.tsx @@ -0,0 +1,41 @@ +import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors'; +import { createDeferredPromise } from '@clerk/shared/utils/index'; + +import { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl'; +import { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions'; +import { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance'; + +// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size + +console.log('clerkUIErrorDOMElementNotFound', clerkUIErrorDOMElementNotFound); +console.log('createDeferredPromise', createDeferredPromise); +console.log('buildVirtualRouterUrl', buildVirtualRouterUrl); +console.log('disambiguateRedirectOptions', disambiguateRedirectOptions); +console.log('extractCssLayerNameFromAppearance', extractCssLayerNameFromAppearance); +// console.log('React', React); +// console.log('Suspense', Suspense); +// console.log('useClerkModalStateParams', useClerkModalStateParams); +// console.log('BlankCaptchaModal', BlankCaptchaModal); +// console.log('CreateOrganizationModal', CreateOrganizationModal); +// console.log('ImpersonationFab', ImpersonationFab); +// console.log('KeylessPrompt', KeylessPrompt); +// console.log('OrganizationProfileModal', OrganizationProfileModal); +// console.log('preloadComponent', preloadComponent); +// console.log('SignInModal', SignInModal); +// console.log('SignUpModal', SignUpModal); +// console.log('UserProfileModal', UserProfileModal); +// console.log('UserVerificationModal', UserVerificationModal); +// console.log('WaitlistModal', WaitlistModal); +// console.log('MountedCheckoutDrawer', MountedCheckoutDrawer); +// console.log('MountedPlanDetailDrawer', MountedPlanDetailDrawer); +// console.log('MountedSubscriptionDetailDrawer', MountedSubscriptionDetailDrawer); +// console.log('LazyComponentRenderer', LazyComponentRenderer); +// console.log('LazyImpersonationFabProvider', LazyImpersonationFabProvider); +// console.log('LazyModalRenderer', LazyModalRenderer); +// console.log('LazyOneTapRenderer', LazyOneTapRenderer); +// console.log('LazyProviders', LazyProviders); +// console.log('OrganizationSwitcherPrefetch', OrganizationSwitcherPrefetch); + +export const mountComponentRenderer = () => { + console.log('nikos Components1'); +}; diff --git a/packages/clerk-js/src/ui/baseTheme.ts b/packages/ui/src/baseTheme.ts similarity index 100% rename from packages/clerk-js/src/ui/baseTheme.ts rename to packages/ui/src/baseTheme.ts diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/ui/src/common/CalloutWithAction.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/CalloutWithAction.tsx rename to packages/ui/src/common/CalloutWithAction.tsx diff --git a/packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx b/packages/ui/src/common/ChooseEnterpriseConnectionCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx rename to packages/ui/src/common/ChooseEnterpriseConnectionCard.tsx diff --git a/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx b/packages/ui/src/common/CustomPageContentContainer.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx rename to packages/ui/src/common/CustomPageContentContainer.tsx diff --git a/packages/clerk-js/src/ui/common/DevOnly.tsx b/packages/ui/src/common/DevOnly.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/DevOnly.tsx rename to packages/ui/src/common/DevOnly.tsx diff --git a/packages/clerk-js/src/ui/common/EmailLinkCompleteFlowCard.tsx b/packages/ui/src/common/EmailLinkCompleteFlowCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/EmailLinkCompleteFlowCard.tsx rename to packages/ui/src/common/EmailLinkCompleteFlowCard.tsx diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/ui/src/common/EmailLinkStatusCard.tsx similarity index 97% rename from packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx rename to packages/ui/src/common/EmailLinkStatusCard.tsx index df58f1b4b6d..dabd2128d3c 100644 --- a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx +++ b/packages/ui/src/common/EmailLinkStatusCard.tsx @@ -1,6 +1,6 @@ +import type { VerifyTokenStatus } from '@clerk/shared/internal/clerk-js/queryParams'; import React from 'react'; -import type { VerifyTokenStatus } from '../../utils/getClerkQueryParam'; import type { LocalizationKey } from '../customizables'; import { Col, descriptors, Flex, Flow, Icon, localizationKeys, Spinner, Text } from '../customizables'; import { Card } from '../elements/Card'; diff --git a/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx b/packages/ui/src/common/EmailLinkVerify.tsx similarity index 94% rename from packages/clerk-js/src/ui/common/EmailLinkVerify.tsx rename to packages/ui/src/common/EmailLinkVerify.tsx index 7d6a81f40a9..1b00cfd3232 100644 --- a/packages/clerk-js/src/ui/common/EmailLinkVerify.tsx +++ b/packages/ui/src/common/EmailLinkVerify.tsx @@ -1,8 +1,8 @@ import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/shared/error'; +import { completeSignUpFlow } from '@clerk/shared/internal/clerk-js/completeSignUpFlow'; import { useClerk } from '@clerk/shared/react'; import React from 'react'; -import { completeSignUpFlow } from '../../utils'; import { useCoreSignUp } from '../contexts'; import type { LocalizationKey } from '../localization'; import { useRouter } from '../router'; @@ -40,7 +40,7 @@ export const EmailLinkVerify = (props: EmailLinkVerifyProps) => { continuePath, navigate, }); - } catch (err) { + } catch (err: any) { if ( isEmailLinkError(err) && (err.code === EmailLinkErrorCodeStatus.Expired || err.code === EmailLinkErrorCodeStatus.ClientMismatch) diff --git a/packages/clerk-js/src/ui/common/Gate.tsx b/packages/ui/src/common/Gate.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/Gate.tsx rename to packages/ui/src/common/Gate.tsx diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/ui/src/common/InfiniteListSpinner.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx rename to packages/ui/src/common/InfiniteListSpinner.tsx diff --git a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx b/packages/ui/src/common/NotificationCountBadge.tsx similarity index 96% rename from packages/clerk-js/src/ui/common/NotificationCountBadge.tsx rename to packages/ui/src/common/NotificationCountBadge.tsx index 4efddafca1c..97d27ac6757 100644 --- a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx +++ b/packages/ui/src/common/NotificationCountBadge.tsx @@ -1,4 +1,5 @@ -import { formatToCompactNumber } from '../../ui/utils/intl'; +import { formatToCompactNumber } from '@/utils/intl'; + import { Flex, localizationKeys, NotificationBadge, useLocalizations } from '../customizables'; import { usePrefersReducedMotion } from '../hooks'; import type { PropsOfComponent, ThemableCssProp } from '../styledSystem'; diff --git a/packages/clerk-js/src/ui/common/PrintableComponent.tsx b/packages/ui/src/common/PrintableComponent.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/PrintableComponent.tsx rename to packages/ui/src/common/PrintableComponent.tsx diff --git a/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx b/packages/ui/src/common/ProviderInitialIcon.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx rename to packages/ui/src/common/ProviderInitialIcon.tsx diff --git a/packages/clerk-js/src/ui/common/QRCode.tsx b/packages/ui/src/common/QRCode.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/QRCode.tsx rename to packages/ui/src/common/QRCode.tsx diff --git a/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx b/packages/ui/src/common/RemoveResourceForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/common/RemoveResourceForm.tsx rename to packages/ui/src/common/RemoveResourceForm.tsx index 31e87a2c567..bf33940ffbd 100644 --- a/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx +++ b/packages/ui/src/common/RemoveResourceForm.tsx @@ -25,7 +25,7 @@ export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps) const handleSubmit = async () => { try { await deleteWithReverification().then(onSuccess); - } catch (e) { + } catch (e: any) { handleError(e, [], card.setError); } }; diff --git a/packages/clerk-js/src/ui/common/SSOCallback.tsx b/packages/ui/src/common/SSOCallback.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/SSOCallback.tsx rename to packages/ui/src/common/SSOCallback.tsx diff --git a/packages/clerk-js/src/ui/common/Wizard.tsx b/packages/ui/src/common/Wizard.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/Wizard.tsx rename to packages/ui/src/common/Wizard.tsx diff --git a/packages/clerk-js/src/ui/common/__tests__/redirects.test.ts b/packages/ui/src/common/__tests__/redirects.test.ts similarity index 100% rename from packages/clerk-js/src/ui/common/__tests__/redirects.test.ts rename to packages/ui/src/common/__tests__/redirects.test.ts diff --git a/packages/clerk-js/src/ui/common/__tests__/verification.test.ts b/packages/ui/src/common/__tests__/verification.test.ts similarity index 100% rename from packages/clerk-js/src/ui/common/__tests__/verification.test.ts rename to packages/ui/src/common/__tests__/verification.test.ts diff --git a/packages/clerk-js/src/ui/common/__tests__/withRedirect.test.tsx b/packages/ui/src/common/__tests__/withRedirect.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/__tests__/withRedirect.test.tsx rename to packages/ui/src/common/__tests__/withRedirect.test.tsx diff --git a/packages/clerk-js/src/ui/common/constants.ts b/packages/ui/src/common/constants.ts similarity index 100% rename from packages/clerk-js/src/ui/common/constants.ts rename to packages/ui/src/common/constants.ts diff --git a/packages/clerk-js/src/ui/common/forms.ts b/packages/ui/src/common/forms.ts similarity index 100% rename from packages/clerk-js/src/ui/common/forms.ts rename to packages/ui/src/common/forms.ts diff --git a/packages/clerk-js/src/ui/common/index.ts b/packages/ui/src/common/index.ts similarity index 100% rename from packages/clerk-js/src/ui/common/index.ts rename to packages/ui/src/common/index.ts diff --git a/packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx b/packages/ui/src/common/organizations/OrganizationPreview.tsx similarity index 100% rename from packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx rename to packages/ui/src/common/organizations/OrganizationPreview.tsx diff --git a/packages/clerk-js/src/ui/common/redirects.ts b/packages/ui/src/common/redirects.ts similarity index 98% rename from packages/clerk-js/src/ui/common/redirects.ts rename to packages/ui/src/common/redirects.ts index aff7a444fce..fa682434c74 100644 --- a/packages/clerk-js/src/ui/common/redirects.ts +++ b/packages/ui/src/common/redirects.ts @@ -1,4 +1,5 @@ -import { buildURL } from '../../utils/url'; +import { buildURL } from '@clerk/shared/internal/clerk-js/url'; + import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts'; export const SSO_CALLBACK_PATH_ROUTE = '/sso-callback'; diff --git a/packages/clerk-js/src/ui/common/verification.ts b/packages/ui/src/common/verification.ts similarity index 100% rename from packages/clerk-js/src/ui/common/verification.ts rename to packages/ui/src/common/verification.ts diff --git a/packages/clerk-js/src/ui/common/withRedirect.tsx b/packages/ui/src/common/withRedirect.tsx similarity index 94% rename from packages/clerk-js/src/ui/common/withRedirect.tsx rename to packages/ui/src/common/withRedirect.tsx index 84b40c60ec0..95758ac1bda 100644 --- a/packages/clerk-js/src/ui/common/withRedirect.tsx +++ b/packages/ui/src/common/withRedirect.tsx @@ -1,12 +1,12 @@ +import type { ComponentGuard } from '@clerk/shared/internal/clerk-js/componentGuards'; +import { isSignedInAndSingleSessionModeEnabled } from '@clerk/shared/internal/clerk-js/componentGuards'; +import { warnings } from '@clerk/shared/internal/clerk-js/warnings'; import { isDevelopmentFromPublishableKey } from '@clerk/shared/keys'; import { useClerk } from '@clerk/shared/react'; import type { Clerk, ClerkOptions, EnvironmentResource } from '@clerk/shared/types'; import type { ComponentType } from 'react'; import React from 'react'; -import { warnings } from '../../core/warnings'; -import type { ComponentGuard } from '../../utils'; -import { isSignedInAndSingleSessionModeEnabled } from '../../utils'; import { useEnvironment, useOptions, useSignInContext, useSignUpContext } from '../contexts'; import { useRouter } from '../router'; import type { AvailableComponentProps } from '../types'; diff --git a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx b/packages/ui/src/components/ApiKeys/ApiKeys.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx rename to packages/ui/src/components/ApiKeys/ApiKeys.tsx index e555672c241..8ede5ba9cbb 100644 --- a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx +++ b/packages/ui/src/components/ApiKeys/ApiKeys.tsx @@ -1,4 +1,5 @@ import { isClerkAPIResponseError } from '@clerk/shared/error'; +import { isOrganizationId } from '@clerk/shared/internal/clerk-js/organization'; import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { CreateAPIKeyParams } from '@clerk/shared/types'; import { lazy, useState } from 'react'; @@ -23,7 +24,6 @@ import { InputWithIcon } from '@/ui/elements/InputWithIcon'; import { Pagination } from '@/ui/elements/Pagination'; import { MagnifyingGlass } from '@/ui/icons'; import { mqu } from '@/ui/styledSystem'; -import { isOrganizationId } from '@/utils'; import { ApiKeysTable } from './ApiKeysTable'; import type { OnCreateParams } from './CreateApiKeyForm'; diff --git a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx b/packages/ui/src/components/ApiKeys/ApiKeysTable.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx rename to packages/ui/src/components/ApiKeys/ApiKeysTable.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx b/packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx rename to packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx rename to packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx diff --git a/packages/clerk-js/src/ui/components/ApiKeys/useApiKeys.ts b/packages/ui/src/components/ApiKeys/useApiKeys.ts similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/useApiKeys.ts rename to packages/ui/src/components/ApiKeys/useApiKeys.ts diff --git a/packages/clerk-js/src/ui/components/BlankCaptchaModal/index.tsx b/packages/ui/src/components/BlankCaptchaModal/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/BlankCaptchaModal/index.tsx rename to packages/ui/src/components/BlankCaptchaModal/index.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/ui/src/components/Checkout/CheckoutComplete.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx rename to packages/ui/src/components/Checkout/CheckoutComplete.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx rename to packages/ui/src/components/Checkout/CheckoutForm.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/ui/src/components/Checkout/CheckoutPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx rename to packages/ui/src/components/Checkout/CheckoutPage.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx b/packages/ui/src/components/Checkout/__tests__/Checkout.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx rename to packages/ui/src/components/Checkout/__tests__/Checkout.test.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/index.tsx b/packages/ui/src/components/Checkout/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/index.tsx rename to packages/ui/src/components/Checkout/index.tsx diff --git a/packages/clerk-js/src/ui/components/Checkout/parts.tsx b/packages/ui/src/components/Checkout/parts.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Checkout/parts.tsx rename to packages/ui/src/components/Checkout/parts.tsx diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganization.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx rename to packages/ui/src/components/CreateOrganization/CreateOrganization.tsx diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx rename to packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx index 2be4066ea4d..3e82e63cb6c 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx @@ -104,7 +104,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani } wizard.nextStep(); - } catch (err) { + } catch (err: any) { handleError(err, [nameField, slugField], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx rename to packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/__tests__/CreateOrganization.test.tsx b/packages/ui/src/components/CreateOrganization/__tests__/CreateOrganization.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/CreateOrganization/__tests__/CreateOrganization.test.tsx rename to packages/ui/src/components/CreateOrganization/__tests__/CreateOrganization.test.tsx diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/index.tsx b/packages/ui/src/components/CreateOrganization/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/CreateOrganization/index.tsx rename to packages/ui/src/components/CreateOrganization/index.tsx diff --git a/packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx b/packages/ui/src/components/GoogleOneTap/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx rename to packages/ui/src/components/GoogleOneTap/index.tsx diff --git a/packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx b/packages/ui/src/components/GoogleOneTap/one-tap-start.tsx similarity index 92% rename from packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx rename to packages/ui/src/components/GoogleOneTap/one-tap-start.tsx index ce4f5a97c2b..6f058d40192 100644 --- a/packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx +++ b/packages/ui/src/components/GoogleOneTap/one-tap-start.tsx @@ -1,14 +1,14 @@ +import { clerkUnsupportedEnvironmentWarning } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk, useUser } from '@clerk/shared/react'; import { useEffect, useRef } from 'react'; import { withCardStateProvider } from '@/ui/elements/contexts'; -import { clerkUnsupportedEnvironmentWarning } from '../../../core/errors'; -import type { GISCredentialResponse } from '../../../utils/one-tap'; -import { loadGIS } from '../../../utils/one-tap'; import { useEnvironment, useGoogleOneTapContext } from '../../contexts'; import { useFetch } from '../../hooks'; import { useRouter } from '../../router'; +import type { GISCredentialResponse } from '../../utils/one-tap'; +import { loadGIS } from '../../utils/one-tap'; function OneTapStartInternal(): JSX.Element | null { const clerk = useClerk(); @@ -26,7 +26,7 @@ function OneTapStartInternal(): JSX.Element | null { token: response.credential, }); await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate); - } catch (e) { + } catch (e: any) { console.error(e); } } diff --git a/packages/clerk-js/src/ui/components/ImpersonationFab/index.tsx b/packages/ui/src/components/ImpersonationFab/index.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/ImpersonationFab/index.tsx rename to packages/ui/src/components/ImpersonationFab/index.tsx index 7596010d4e4..33f2f6512bb 100644 --- a/packages/clerk-js/src/ui/components/ImpersonationFab/index.tsx +++ b/packages/ui/src/components/ImpersonationFab/index.tsx @@ -1,9 +1,9 @@ +import { getFullName, getIdentifier } from '@clerk/shared/internal/clerk-js/user'; import { useClerk, useSession, useUser } from '@clerk/shared/react'; import type { SignedInSessionResource } from '@clerk/shared/types'; import type { PointerEventHandler } from 'react'; import React, { useEffect, useRef } from 'react'; -import { getFullName, getIdentifier } from '../../../utils/user'; import { useSignOutContext, withCoreUserGuard } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx b/packages/ui/src/components/KeylessPrompt/ClerkLogoIcon.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx rename to packages/ui/src/components/KeylessPrompt/ClerkLogoIcon.tsx diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx b/packages/ui/src/components/KeylessPrompt/KeySlashIcon.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx rename to packages/ui/src/components/KeylessPrompt/KeySlashIcon.tsx diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/ui/src/components/KeylessPrompt/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx rename to packages/ui/src/components/KeylessPrompt/index.tsx diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts b/packages/ui/src/components/KeylessPrompt/use-revalidate-environment.ts similarity index 92% rename from packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts rename to packages/ui/src/components/KeylessPrompt/use-revalidate-environment.ts index fca17dc5c6f..cb1dad5a34e 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts +++ b/packages/ui/src/components/KeylessPrompt/use-revalidate-environment.ts @@ -1,8 +1,7 @@ import { useClerk } from '@clerk/shared/react'; +import type { Clerk } from '@clerk/shared/types'; import { useEffect, useReducer, useRef } from 'react'; -import type { Clerk } from '../../../core/clerk'; -import type { Environment } from '../../../core/resources'; import { useEnvironment } from '../../contexts'; const THROTTLE_DURATION_MS = 10 * 1000; @@ -22,7 +21,8 @@ function useRevalidateEnvironment() { 'focus', async () => { - const environment = (clerk as Clerk).__unstable__environment as Environment | undefined; + // @ts-expect-error `__unstable__environment` is not typed + const environment = (clerk as Clerk).__unstable__environment; if (!environment) { return; diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx rename to packages/ui/src/components/OAuthConsent/OAuthConsent.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx rename to packages/ui/src/components/OrganizationList/OrganizationListPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx b/packages/ui/src/components/OrganizationList/UserInvitationList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx rename to packages/ui/src/components/OrganizationList/UserInvitationList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx b/packages/ui/src/components/OrganizationList/UserMembershipList.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx rename to packages/ui/src/components/OrganizationList/UserMembershipList.tsx index 58d204c43fe..48e9029515c 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx +++ b/packages/ui/src/components/OrganizationList/UserMembershipList.tsx @@ -1,7 +1,7 @@ +import { isClerkAPIResponseError } from '@clerk/shared/error'; import { useOrganizationList, useUser } from '@clerk/shared/react'; import type { OrganizationResource } from '@clerk/shared/types'; -import { isClerkAPIResponseError } from '@/index.headless'; import { sharedMainIdentifierSx } from '@/ui/common/organizations/OrganizationPreview'; import { localizationKeys, useLocalizations } from '@/ui/customizables'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; @@ -31,7 +31,7 @@ export const MembershipPreview = (props: { organization: OrganizationResource }) }); await navigateAfterSelectOrganization(organization); - } catch (err) { + } catch (err: any) { if (!isClerkAPIResponseError(err)) { handleError(err, [], card.setError); return; diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx b/packages/ui/src/components/OrganizationList/UserSuggestionList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx rename to packages/ui/src/components/OrganizationList/UserSuggestionList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx b/packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/__tests__/OrganizationList.test.tsx rename to packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/index.tsx b/packages/ui/src/components/OrganizationList/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/index.tsx rename to packages/ui/src/components/OrganizationList/index.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/ui/src/components/OrganizationList/shared.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/shared.tsx rename to packages/ui/src/components/OrganizationList/shared.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationList/utils.ts b/packages/ui/src/components/OrganizationList/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationList/utils.ts rename to packages/ui/src/components/OrganizationList/utils.ts diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/ui/src/components/OrganizationProfile/ActionConfirmationPage.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx rename to packages/ui/src/components/OrganizationProfile/ActionConfirmationPage.tsx index 19c3dc136d7..803acc859d0 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/ActionConfirmationPage.tsx @@ -142,7 +142,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP } try { await onConfirmation().then(() => wizard.nextStep()); - } catch (e) { + } catch (e: any) { handleError(e, [], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx rename to packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx b/packages/ui/src/components/OrganizationProfile/AddDomainForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx rename to packages/ui/src/components/OrganizationProfile/AddDomainForm.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx b/packages/ui/src/components/OrganizationProfile/BillingWidget.tsx similarity index 95% rename from packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx rename to packages/ui/src/components/OrganizationProfile/BillingWidget.tsx index 5f6c3cf4430..19bada06287 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx +++ b/packages/ui/src/components/OrganizationProfile/BillingWidget.tsx @@ -1,4 +1,5 @@ -import { runIfFunctionOrReturn } from '../../../utils'; +import { runIfFunctionOrReturn } from '@clerk/shared/utils'; + import { AlertIcon, Flex, Link, Text } from '../../customizables'; import { useRouter } from '../../router'; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/ui/src/components/OrganizationProfile/DomainList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx rename to packages/ui/src/components/OrganizationProfile/DomainList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx b/packages/ui/src/components/OrganizationProfile/EnrollmentBadge.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx rename to packages/ui/src/components/OrganizationProfile/EnrollmentBadge.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx rename to packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersScreen.tsx b/packages/ui/src/components/OrganizationProfile/InviteMembersScreen.tsx similarity index 94% rename from packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersScreen.tsx rename to packages/ui/src/components/OrganizationProfile/InviteMembersScreen.tsx index 0559717b47b..4f21a5aae91 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersScreen.tsx +++ b/packages/ui/src/components/OrganizationProfile/InviteMembersScreen.tsx @@ -1,11 +1,11 @@ import { useOrganization } from '@clerk/shared/react'; +import { runIfFunctionOrReturn } from '@clerk/shared/utils'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { FormContainer } from '@/ui/elements/FormContainer'; import { IconCircle } from '@/ui/elements/IconCircle'; import { SuccessPage } from '@/ui/elements/SuccessPage'; -import { runIfFunctionOrReturn } from '../../../utils'; import { useWizard, Wizard } from '../../common'; import { useOrganizationProfileContext } from '../../contexts'; import { descriptors, Flex, localizationKeys, Text } from '../../customizables'; @@ -26,7 +26,7 @@ export const InviteMembersScreen = withCardStateProvider((props: InviteMembersSc const card = useCardState(); const wizard = useWizard({ onNextStep: () => card.setError(undefined) }); const { organization } = useOrganization(); - //@ts-expect-error + // @ts-expect-error - __unstable_manageBillingUrl and __unstable_manageBillingMembersLimit are unstable props const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext(); if (!organization) { diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx rename to packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx rename to packages/ui/src/components/OrganizationProfile/MemberListTable.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx rename to packages/ui/src/components/OrganizationProfile/MembersActions.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/ui/src/components/OrganizationProfile/MembersSearch.tsx similarity index 94% rename from packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx rename to packages/ui/src/components/OrganizationProfile/MembersSearch.tsx index 845c521e693..0b78d9c6b33 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx +++ b/packages/ui/src/components/OrganizationProfile/MembersSearch.tsx @@ -2,13 +2,13 @@ import type { useOrganization } from '@clerk/shared/react'; import type { GetMembersParams } from '@clerk/shared/types'; import { useEffect, useRef } from 'react'; +import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables'; +import { MagnifyingGlass } from '@/icons'; +import { Spinner } from '@/primitives'; +import { mqu } from '@/styledSystem'; import { Animated } from '@/ui/elements/Animated'; import { InputWithIcon } from '@/ui/elements/InputWithIcon'; -import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../../ui/customizables'; -import { MagnifyingGlass } from '../../../ui/icons'; -import { Spinner } from '../../../ui/primitives'; -import { mqu } from '../../../ui/styledSystem'; import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers'; type MembersSearchProps = { diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx b/packages/ui/src/components/OrganizationProfile/MembershipWidget.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx rename to packages/ui/src/components/OrganizationProfile/MembershipWidget.tsx index 82978d49d74..7e108358476 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx +++ b/packages/ui/src/components/OrganizationProfile/MembershipWidget.tsx @@ -1,8 +1,8 @@ import { useOrganization } from '@clerk/shared/react'; +import { runIfFunctionOrReturn } from '@clerk/shared/utils'; import { Gauge } from '@/ui/elements/Gauge'; -import { runIfFunctionOrReturn } from '../../../utils'; import { useOrganizationProfileContext } from '../../contexts'; import { Flex, Icon, Link, Text } from '../../customizables'; import { ArrowRightIcon } from '../../icons'; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileNavbar.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationProfileNavbar.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationStatementPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationStatementPage.tsx rename to packages/ui/src/components/OrganizationProfile/OrganizationStatementPage.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/ui/src/components/OrganizationProfile/ProfileForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx rename to packages/ui/src/components/OrganizationProfile/ProfileForm.tsx index 12e924b2561..6c620ffd7a9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx +++ b/packages/ui/src/components/OrganizationProfile/ProfileForm.tsx @@ -11,8 +11,8 @@ import { FormContainer } from '@/ui/elements/FormContainer'; import { handleError } from '@/ui/utils/errorHandler'; import { useFormControl } from '@/ui/utils/useFormControl'; -import { isDefaultImage } from '../../../utils'; import { localizationKeys } from '../../customizables'; +import { isDefaultImage } from '../../utils/image'; import { OrganizationProfileAvatarUploader } from './OrganizationProfileAvatarUploader'; type ProfileFormProps = FormProps; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainForm.tsx b/packages/ui/src/components/OrganizationProfile/RemoveDomainForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainForm.tsx rename to packages/ui/src/components/OrganizationProfile/RemoveDomainForm.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainScreen.tsx b/packages/ui/src/components/OrganizationProfile/RemoveDomainScreen.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainScreen.tsx rename to packages/ui/src/components/OrganizationProfile/RemoveDomainScreen.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx rename to packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainForm.tsx b/packages/ui/src/components/OrganizationProfile/VerifiedDomainForm.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainForm.tsx rename to packages/ui/src/components/OrganizationProfile/VerifiedDomainForm.tsx index 89c3d76bc78..4f369ebbde7 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainForm.tsx +++ b/packages/ui/src/components/OrganizationProfile/VerifiedDomainForm.tsx @@ -154,7 +154,7 @@ export const VerifiedDomainForm = withCardStateProvider((props: VerifiedDomainFo await domains.revalidate(); onSuccess(); - } catch (e) { + } catch (e: any) { handleError(e, [enrollmentMode], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainScreen.tsx b/packages/ui/src/components/OrganizationProfile/VerifiedDomainScreen.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainScreen.tsx rename to packages/ui/src/components/OrganizationProfile/VerifiedDomainScreen.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx b/packages/ui/src/components/OrganizationProfile/VerifyDomainForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainForm.tsx rename to packages/ui/src/components/OrganizationProfile/VerifyDomainForm.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainScreen.tsx b/packages/ui/src/components/OrganizationProfile/VerifyDomainScreen.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainScreen.tsx rename to packages/ui/src/components/OrganizationProfile/VerifyDomainScreen.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx rename to packages/ui/src/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts b/packages/ui/src/components/OrganizationProfile/__tests__/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts rename to packages/ui/src/components/OrganizationProfile/__tests__/utils.ts diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx b/packages/ui/src/components/OrganizationProfile/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx rename to packages/ui/src/components/OrganizationProfile/index.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx rename to packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index 567e03c42bf..c72e8c8340f 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -1,5 +1,6 @@ import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react'; import type { OrganizationResource } from '@clerk/shared/types'; +import { runIfFunctionOrReturn } from '@clerk/shared/utils'; import React from 'react'; import { Actions, SmallAction } from '@/ui/elements/Actions'; @@ -8,7 +9,6 @@ import { OrganizationPreview } from '@/ui/elements/OrganizationPreview'; import { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview'; import { PopoverCard } from '@/ui/elements/PopoverCard'; -import { runIfFunctionOrReturn } from '../../../utils'; import { NotificationCountBadge, withProtect } from '../../common'; import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts'; import { descriptors, Flex, localizationKeys } from '../../customizables'; diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx rename to packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx rename to packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx rename to packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx rename to packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx b/packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx rename to packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/test-utils.ts b/packages/ui/src/components/OrganizationSwitcher/__tests__/test-utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/test-utils.ts rename to packages/ui/src/components/OrganizationSwitcher/__tests__/test-utils.ts diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utils.test.ts b/packages/ui/src/components/OrganizationSwitcher/__tests__/utils.test.ts similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utils.test.ts rename to packages/ui/src/components/OrganizationSwitcher/__tests__/utils.test.ts diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/index.tsx b/packages/ui/src/components/OrganizationSwitcher/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/index.tsx rename to packages/ui/src/components/OrganizationSwitcher/index.tsx diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts b/packages/ui/src/components/OrganizationSwitcher/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts rename to packages/ui/src/components/OrganizationSwitcher/utils.ts diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx rename to packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptsList.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptsList.tsx rename to packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/index.ts b/packages/ui/src/components/PaymentAttempts/index.ts similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentAttempts/index.ts rename to packages/ui/src/components/PaymentAttempts/index.ts diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx b/packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx rename to packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx index adf8d411432..a0ef7a64b28 100644 --- a/packages/clerk-js/src/ui/components/PaymentMethods/AddPaymentMethod.tsx +++ b/packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx @@ -210,7 +210,7 @@ const AddPaymentMethodForm = ({ children }: PropsWithChildren) => { } try { await onSuccess(data); - } catch (error) { + } catch (error: any) { void handleError(error, [], card.setError); } finally { card.setIdle(); diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentElementSkeleton.tsx b/packages/ui/src/components/PaymentMethods/PaymentElementSkeleton.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentMethods/PaymentElementSkeleton.tsx rename to packages/ui/src/components/PaymentMethods/PaymentElementSkeleton.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethodRow.tsx b/packages/ui/src/components/PaymentMethods/PaymentMethodRow.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethodRow.tsx rename to packages/ui/src/components/PaymentMethods/PaymentMethodRow.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx b/packages/ui/src/components/PaymentMethods/PaymentMethods.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx rename to packages/ui/src/components/PaymentMethods/PaymentMethods.tsx index 7b53795ce9d..11aaba0205a 100644 --- a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx +++ b/packages/ui/src/components/PaymentMethods/PaymentMethods.tsx @@ -74,7 +74,7 @@ const RemoveScreen = ({ await paymentMethod .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined }) .then(revalidate) - .catch((error: Error) => { + .catch((error: any) => { handleError(error, [], card.setError); }); }; diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/TestPaymentMethod.tsx b/packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentMethods/TestPaymentMethod.tsx rename to packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/index.ts b/packages/ui/src/components/PaymentMethods/index.ts similarity index 100% rename from packages/clerk-js/src/ui/components/PaymentMethods/index.ts rename to packages/ui/src/components/PaymentMethods/index.ts diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/ui/src/components/Plans/PlanDetails.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx rename to packages/ui/src/components/Plans/PlanDetails.tsx diff --git a/packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx b/packages/ui/src/components/Plans/__tests__/PlanDetails.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx rename to packages/ui/src/components/Plans/__tests__/PlanDetails.test.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/ui/src/components/PricingTable/PricingTable.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx rename to packages/ui/src/components/PricingTable/PricingTable.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/ui/src/components/PricingTable/PricingTableDefault.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx rename to packages/ui/src/components/PricingTable/PricingTableDefault.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx rename to packages/ui/src/components/PricingTable/PricingTableMatrix.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx b/packages/ui/src/components/PricingTable/__tests__/PricingTable.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx rename to packages/ui/src/components/PricingTable/__tests__/PricingTable.test.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/index.tsx b/packages/ui/src/components/PricingTable/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/index.tsx rename to packages/ui/src/components/PricingTable/index.tsx diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts b/packages/ui/src/components/PricingTable/utils/pricing-footer-state.spec.ts similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts rename to packages/ui/src/components/PricingTable/utils/pricing-footer-state.spec.ts diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts b/packages/ui/src/components/PricingTable/utils/pricing-footer-state.ts similarity index 100% rename from packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts rename to packages/ui/src/components/PricingTable/utils/pricing-footer-state.ts diff --git a/packages/clerk-js/src/ui/components/SessionTasks/index.tsx b/packages/ui/src/components/SessionTasks/index.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/SessionTasks/index.tsx rename to packages/ui/src/components/SessionTasks/index.tsx index a5c8ca20ebb..b5300052d4b 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/index.tsx +++ b/packages/ui/src/components/SessionTasks/index.tsx @@ -1,3 +1,4 @@ +import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@clerk/shared/internal/clerk-js/sessionTasks'; import { useClerk } from '@clerk/shared/react'; import { eventComponentMounted } from '@clerk/shared/telemetry'; import type { SessionResource } from '@clerk/shared/types'; @@ -8,7 +9,6 @@ import { Card } from '@/ui/elements/Card'; import { withCardStateProvider } from '@/ui/elements/contexts'; import { LoadingCardContainer } from '@/ui/elements/LoadingCard'; -import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks'; import { SessionTasksContext, TaskChooseOrganizationContext, diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx rename to packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx index 94340b62856..cad5326c570 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx +++ b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx @@ -126,7 +126,7 @@ const MembershipPreview = (props: { organization: OrganizationResource }) => { await navigate(redirectUrlComplete); }, }); - } catch (err) { + } catch (err: any) { if (!isClerkAPIResponseError(err)) { handleError(err, [], card.setError); return; diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx rename to packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx index 130f057a75c..75f7ab38878 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx +++ b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx @@ -65,7 +65,7 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) = await navigate(redirectUrlComplete); }, }); - } catch (err) { + } catch (err: any) { handleError(err, [nameField, slugField], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx rename to packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx rename to packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts b/packages/ui/src/components/SessionTasks/tasks/withTaskGuard.ts similarity index 92% rename from packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts rename to packages/ui/src/components/SessionTasks/tasks/withTaskGuard.ts index d5702f19760..e8489db6f8e 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts +++ b/packages/ui/src/components/SessionTasks/tasks/withTaskGuard.ts @@ -1,6 +1,6 @@ +import { warnings } from '@clerk/shared/internal/clerk-js/warnings'; import type { ComponentType } from 'react'; -import { warnings } from '@/core/warnings'; import { withRedirect } from '@/ui/common'; import { useTaskChooseOrganizationContext } from '@/ui/contexts/components/SessionTasks'; import type { AvailableComponentProps } from '@/ui/types'; diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/ui/src/components/SignIn/AlternativeMethods.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx rename to packages/ui/src/components/SignIn/AlternativeMethods.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/HavingTrouble.tsx b/packages/ui/src/components/SignIn/HavingTrouble.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/HavingTrouble.tsx rename to packages/ui/src/components/SignIn/HavingTrouble.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx b/packages/ui/src/components/SignIn/ResetPassword.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx rename to packages/ui/src/components/SignIn/ResetPassword.tsx index 9295788c55a..b6baa2f118f 100644 --- a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx +++ b/packages/ui/src/components/SignIn/ResetPassword.tsx @@ -1,3 +1,4 @@ +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import React from 'react'; import { Card } from '@/ui/elements/Card'; @@ -8,7 +9,6 @@ import { handleError } from '@/ui/utils/errorHandler'; import { createPasswordError } from '@/ui/utils/passwordUtils'; import { useFormControl } from '@/ui/utils/useFormControl'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useEnvironment } from '../../contexts'; import { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables'; import { useConfirmPassword } from '../../hooks'; @@ -92,7 +92,7 @@ const ResetPasswordInternal = () => { default: return console.error(clerkInvalidFAPIResponse(status, supportEmail)); } - } catch (e) { + } catch (e: any) { return handleError(e, [passwordField, confirmField], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx b/packages/ui/src/components/SignIn/ResetPasswordSuccess.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx rename to packages/ui/src/components/SignIn/ResetPasswordSuccess.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx rename to packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx b/packages/ui/src/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx rename to packages/ui/src/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx b/packages/ui/src/components/SignIn/SignInFactorOne.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx rename to packages/ui/src/components/SignIn/SignInFactorOne.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx b/packages/ui/src/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx index c0a1aaaab02..eaf0b15af0e 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx @@ -1,4 +1,5 @@ import { isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import type { PhoneCodeFactor, SignInFactor } from '@clerk/shared/types'; @@ -7,7 +8,6 @@ import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCa import { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard'; import { handleError } from '@/ui/utils/errorHandler'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { useSupportEmail } from '../../hooks/useSupportEmail'; import { type LocalizationKey, localizationKeys } from '../../localization'; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativePhoneCodeCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOneAlternativePhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativePhoneCodeCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneAlternativePhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/ui/src/components/SignIn/SignInFactorOneCodeForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneCodeForm.tsx index 350b618862a..0a21dddf09f 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorOneCodeForm.tsx @@ -1,4 +1,5 @@ import { isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/shared/types'; import { useMemo } from 'react'; @@ -8,7 +9,6 @@ import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCa import { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard'; import { handleError } from '@/ui/utils/errorHandler'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { useFetch } from '../../hooks'; import { useSupportEmail } from '../../hooks/useSupportEmail'; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailCodeCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOneEmailCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailCodeCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneEmailCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOneEmailLinkCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneEmailLinkCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx b/packages/ui/src/components/SignIn/SignInFactorOneEnterpriseConnections.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneEnterpriseConnections.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneForgotPasswordCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOneForgotPasswordCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOneForgotPasswordCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOneForgotPasswordCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasskey.tsx b/packages/ui/src/components/SignIn/SignInFactorOnePasskey.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasskey.tsx rename to packages/ui/src/components/SignIn/SignInFactorOnePasskey.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOnePasswordCard.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOnePasswordCard.tsx index f7e05371cee..34884e417fb 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorOnePasswordCard.tsx @@ -1,4 +1,5 @@ import { isPasswordPwnedError, isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import React from 'react'; @@ -10,7 +11,6 @@ import { IdentityPreview } from '@/ui/elements/IdentityPreview'; import { handleError } from '@/ui/utils/errorHandler'; import { useFormControl } from '@/ui/utils/useFormControl'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { descriptors, Flex, Flow, localizationKeys } from '../../customizables'; import { useSupportEmail } from '../../hooks/useSupportEmail'; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx b/packages/ui/src/components/SignIn/SignInFactorOnePhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorOnePhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx b/packages/ui/src/components/SignIn/SignInFactorTwo.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwo.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoAlternativeMethods.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwoAlternativeMethods.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx index c98810d163a..ed86694d2c0 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx @@ -1,4 +1,5 @@ import { isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import type { SignInResource } from '@clerk/shared/types'; import React from 'react'; @@ -10,7 +11,6 @@ import { Header } from '@/ui/elements/Header'; import { handleError } from '@/ui/utils/errorHandler'; import { useFormControl } from '@/ui/utils/useFormControl'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { Col, descriptors, localizationKeys } from '../../customizables'; import { useSupportEmail } from '../../hooks/useSupportEmail'; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoCodeForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwoCodeForm.tsx index 314c63cc583..b1b470c1093 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorTwoCodeForm.tsx @@ -1,4 +1,5 @@ import { isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/shared/types'; import React from 'react'; @@ -8,7 +9,6 @@ import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCa import { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard'; import { handleError } from '@/ui/utils/errorHandler'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { localizationKeys, Text } from '../../customizables'; import { useSupportEmail } from '../../hooks/useSupportEmail'; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoTOTPCard.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoTOTPCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoTOTPCard.tsx rename to packages/ui/src/components/SignIn/SignInFactorTwoTOTPCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx b/packages/ui/src/components/SignIn/SignInSSOCallback.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx rename to packages/ui/src/components/SignIn/SignInSSOCallback.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx b/packages/ui/src/components/SignIn/SignInSocialButtons.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx rename to packages/ui/src/components/SignIn/SignInSocialButtons.tsx index ad745d83eba..52e7c5a39bf 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx +++ b/packages/ui/src/components/SignIn/SignInSocialButtons.tsx @@ -33,7 +33,7 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps) return ( { if (shouldUsePopup) { diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/ui/src/components/SignIn/SignInStart.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx rename to packages/ui/src/components/SignIn/SignInStart.tsx index c12bd76fce9..6ed47e1035a 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx +++ b/packages/ui/src/components/SignIn/SignInStart.tsx @@ -1,4 +1,7 @@ import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode'; +import { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; +import { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; import { useClerk } from '@clerk/shared/react'; import type { ClerkAPIError, @@ -21,9 +24,6 @@ import { isMobileDevice } from '@/ui/utils/isMobileDevice'; import type { FormControlState } from '@/ui/utils/useFormControl'; import { buildRequest, useFormControl } from '@/ui/utils/useFormControl'; -import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; -import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils'; import type { SignInStartIdentifier } from '../../common'; import { buildSSOCallbackURL, @@ -403,7 +403,7 @@ function SignInStartInternal(): JSX.Element { return; } } - } catch (e) { + } catch (e: any) { return attemptToRecoverFromSignInError(e); } }; diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx b/packages/ui/src/components/SignIn/__tests__/ResetPassword.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx rename to packages/ui/src/components/SignIn/__tests__/ResetPassword.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx b/packages/ui/src/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx rename to packages/ui/src/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx rename to packages/ui/src/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx rename to packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx rename to packages/ui/src/components/SignIn/__tests__/SignInFactorOneCodeForm.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx rename to packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx rename to packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/handleCombinedFlowTransfer.test.ts b/packages/ui/src/components/SignIn/__tests__/handleCombinedFlowTransfer.test.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/handleCombinedFlowTransfer.test.ts rename to packages/ui/src/components/SignIn/__tests__/handleCombinedFlowTransfer.test.ts diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/utils.test.ts b/packages/ui/src/components/SignIn/__tests__/utils.test.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/__tests__/utils.test.ts rename to packages/ui/src/components/SignIn/__tests__/utils.test.ts diff --git a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts b/packages/ui/src/components/SignIn/handleCombinedFlowTransfer.ts similarity index 98% rename from packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts rename to packages/ui/src/components/SignIn/handleCombinedFlowTransfer.ts index 4528af4d064..7cf3c7280c6 100644 --- a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts +++ b/packages/ui/src/components/SignIn/handleCombinedFlowTransfer.ts @@ -1,3 +1,4 @@ +import { SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; import type { LoadedClerk, PhoneCodeChannel, @@ -7,7 +8,6 @@ import type { SignUpResource, } from '@clerk/shared/types'; -import { SIGN_UP_MODES } from '../../../core/constants'; import type { RouteContextValue } from '../../router/RouteContext'; import { lazyCompleteSignUpFlow } from './lazy-sign-up'; diff --git a/packages/clerk-js/src/ui/components/SignIn/index.tsx b/packages/ui/src/components/SignIn/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/index.tsx rename to packages/ui/src/components/SignIn/index.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts b/packages/ui/src/components/SignIn/lazy-sign-up.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts rename to packages/ui/src/components/SignIn/lazy-sign-up.ts diff --git a/packages/clerk-js/src/ui/components/SignIn/shared.ts b/packages/ui/src/components/SignIn/shared.ts similarity index 94% rename from packages/clerk-js/src/ui/components/SignIn/shared.ts rename to packages/ui/src/components/SignIn/shared.ts index e4939eec64d..656b844bbc7 100644 --- a/packages/clerk-js/src/ui/components/SignIn/shared.ts +++ b/packages/ui/src/components/SignIn/shared.ts @@ -1,4 +1,6 @@ import { isClerkRuntimeError, isUserLockedError } from '@clerk/shared/error'; +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; +import { __internal_WebAuthnAbortService } from '@clerk/shared/internal/clerk-js/passkeys'; import { useClerk } from '@clerk/shared/react'; import type { EnterpriseSSOFactor, SignInFirstFactor } from '@clerk/shared/types'; import { useCallback, useEffect } from 'react'; @@ -6,8 +8,6 @@ import { useCallback, useEffect } from 'react'; import { useCardState } from '@/ui/elements/contexts'; import { handleError } from '@/ui/utils/errorHandler'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; -import { __internal_WebAuthnAbortService } from '../../../utils/passkeys'; import { useCoreSignIn, useSignInContext } from '../../contexts'; import { useSupportEmail } from '../../hooks/useSupportEmail'; @@ -41,7 +41,7 @@ function useHandleAuthenticateWithPasskey(onSecondFactor: () => Promise default: return console.error(clerkInvalidFAPIResponse(res.status, supportEmail)); } - } catch (err) { + } catch (err: any) { const { flow } = args[0] || {}; if (isClerkRuntimeError(err)) { diff --git a/packages/clerk-js/src/ui/components/SignIn/useResetPasswordFactor.tsx b/packages/ui/src/components/SignIn/useResetPasswordFactor.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/useResetPasswordFactor.tsx rename to packages/ui/src/components/SignIn/useResetPasswordFactor.tsx diff --git a/packages/clerk-js/src/ui/components/SignIn/utils.ts b/packages/ui/src/components/SignIn/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/utils.ts rename to packages/ui/src/components/SignIn/utils.ts diff --git a/packages/clerk-js/src/ui/components/SignIn/withHavingTrouble.tsx b/packages/ui/src/components/SignIn/withHavingTrouble.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignIn/withHavingTrouble.tsx rename to packages/ui/src/components/SignIn/withHavingTrouble.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/ui/src/components/SignUp/SignUpContinue.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx rename to packages/ui/src/components/SignUp/SignUpContinue.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpEmailCodeCard.tsx b/packages/ui/src/components/SignUp/SignUpEmailCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpEmailCodeCard.tsx rename to packages/ui/src/components/SignUp/SignUpEmailCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx b/packages/ui/src/components/SignUp/SignUpEmailLinkCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx rename to packages/ui/src/components/SignUp/SignUpEmailLinkCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx b/packages/ui/src/components/SignUp/SignUpEnterpriseConnections.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx rename to packages/ui/src/components/SignUp/SignUpEnterpriseConnections.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx b/packages/ui/src/components/SignUp/SignUpForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx rename to packages/ui/src/components/SignUp/SignUpForm.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx b/packages/ui/src/components/SignUp/SignUpPhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx rename to packages/ui/src/components/SignUp/SignUpPhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpRestrictedAccess.tsx b/packages/ui/src/components/SignUp/SignUpRestrictedAccess.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/SignUp/SignUpRestrictedAccess.tsx rename to packages/ui/src/components/SignUp/SignUpRestrictedAccess.tsx index 10bac2a9125..c05a0b3d45f 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpRestrictedAccess.tsx +++ b/packages/ui/src/components/SignUp/SignUpRestrictedAccess.tsx @@ -1,9 +1,9 @@ +import { SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; import { useClerk } from '@clerk/shared/react'; import { Card } from '@/ui/elements/Card'; import { Header } from '@/ui/elements/Header'; -import { SIGN_UP_MODES } from '../../../core/constants'; import { useEnvironment, useSignUpContext } from '../../contexts'; import { Button, Flex, Icon, localizationKeys } from '../../customizables'; import { useCardState } from '../../elements/contexts'; diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx b/packages/ui/src/components/SignUp/SignUpSSOCallback.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx rename to packages/ui/src/components/SignUp/SignUpSSOCallback.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx b/packages/ui/src/components/SignUp/SignUpSocialButtons.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx rename to packages/ui/src/components/SignUp/SignUpSocialButtons.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx rename to packages/ui/src/components/SignUp/SignUpStart.tsx index 20f4a4711cd..cc9bb58db00 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx +++ b/packages/ui/src/components/SignUp/SignUpStart.tsx @@ -1,9 +1,11 @@ import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode'; +import { isClerkAPIResponseError } from '@clerk/shared/error'; +import { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants'; +import { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; import { useClerk } from '@clerk/shared/react'; import type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types'; import React from 'react'; -import { isClerkAPIResponseError } from '@/index.headless'; import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; @@ -15,8 +17,6 @@ import type { FormControlState } from '@/ui/utils/useFormControl'; import { buildRequest, useFormControl } from '@/ui/utils/useFormControl'; import { createUsernameError } from '@/ui/utils/usernameUtils'; -import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants'; -import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils/getClerkQueryParam'; import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '../../common'; import { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts'; import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables'; diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStartAlternativePhoneCodePhoneNumberCard.tsx b/packages/ui/src/components/SignUp/SignUpStartAlternativePhoneCodePhoneNumberCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpStartAlternativePhoneCodePhoneNumberCard.tsx rename to packages/ui/src/components/SignUp/SignUpStartAlternativePhoneCodePhoneNumberCard.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx b/packages/ui/src/components/SignUp/SignUpVerificationCodeForm.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx rename to packages/ui/src/components/SignUp/SignUpVerificationCodeForm.tsx index 2f2d2780476..4ca48081849 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx +++ b/packages/ui/src/components/SignUp/SignUpVerificationCodeForm.tsx @@ -1,3 +1,4 @@ +import { forwardClerkQueryParams } from '@clerk/shared/internal/clerk-js/queryParams'; import { useClerk } from '@clerk/shared/react'; import type { SignUpResource } from '@clerk/shared/types'; import React from 'react'; @@ -5,7 +6,6 @@ import React from 'react'; import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard'; import { VerificationCodeCard } from '@/ui/elements/VerificationCodeCard'; -import { forwardClerkQueryParams } from '../../../utils/getClerkQueryParam'; import { SignInContext, useSignUpContext } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; import { useRouter } from '../../router'; diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpVerifyEmail.tsx b/packages/ui/src/components/SignUp/SignUpVerifyEmail.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpVerifyEmail.tsx rename to packages/ui/src/components/SignUp/SignUpVerifyEmail.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpVerifyPhone.tsx b/packages/ui/src/components/SignUp/SignUpVerifyPhone.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/SignUpVerifyPhone.tsx rename to packages/ui/src/components/SignUp/SignUpVerifyPhone.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx rename to packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx rename to packages/ui/src/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx rename to packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx rename to packages/ui/src/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx rename to packages/ui/src/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/signUpFormHelpers.test.ts b/packages/ui/src/components/SignUp/__tests__/signUpFormHelpers.test.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/__tests__/signUpFormHelpers.test.ts rename to packages/ui/src/components/SignUp/__tests__/signUpFormHelpers.test.ts diff --git a/packages/clerk-js/src/ui/components/SignUp/index.tsx b/packages/ui/src/components/SignUp/index.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/SignUp/index.tsx rename to packages/ui/src/components/SignUp/index.tsx index 3ba8a39b6be..49dd03f051e 100644 --- a/packages/clerk-js/src/ui/components/SignUp/index.tsx +++ b/packages/ui/src/components/SignUp/index.tsx @@ -4,10 +4,10 @@ import React from 'react'; import { usePreloadTasks } from '@/ui/hooks/usePreloadTasks'; -import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components'; import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts'; import { Flow } from '../../customizables'; +import { SessionTasks as LazySessionTasks } from '../../lazyModules/components'; import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { SignUpContinue } from './SignUpContinue'; import { SignUpEnterpriseConnections } from './SignUpEnterpriseConnections'; diff --git a/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts b/packages/ui/src/components/SignUp/signUpFormHelpers.ts similarity index 100% rename from packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts rename to packages/ui/src/components/SignUp/signUpFormHelpers.ts diff --git a/packages/ui/src/components/SignUp/util.ts b/packages/ui/src/components/SignUp/util.ts new file mode 100644 index 00000000000..354278861dd --- /dev/null +++ b/packages/ui/src/components/SignUp/util.ts @@ -0,0 +1 @@ +export { completeSignUpFlow } from '@clerk/shared/internal/clerk-js/completeSignUpFlow'; diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/ui/src/components/Statements/Statement.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Statements/Statement.tsx rename to packages/ui/src/components/Statements/Statement.tsx diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/ui/src/components/Statements/StatementPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Statements/StatementPage.tsx rename to packages/ui/src/components/Statements/StatementPage.tsx diff --git a/packages/clerk-js/src/ui/components/Statements/StatementsList.tsx b/packages/ui/src/components/Statements/StatementsList.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/Statements/StatementsList.tsx rename to packages/ui/src/components/Statements/StatementsList.tsx index 5b3c852176a..6b6b757c83b 100644 --- a/packages/clerk-js/src/ui/components/Statements/StatementsList.tsx +++ b/packages/ui/src/components/Statements/StatementsList.tsx @@ -1,9 +1,9 @@ import type { BillingStatementResource } from '@clerk/shared/types'; +import { useStatements, useSubscriberTypeLocalizationRoot } from '@/contexts'; import { DataTable, DataTableRow } from '@/ui/elements/DataTable'; import { formatDate } from '@/ui/utils/formatDate'; -import { useStatements, useSubscriberTypeLocalizationRoot } from '../../../ui/contexts'; import { localizationKeys, Td, Text } from '../../customizables'; import { useRouter } from '../../router'; import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible'; diff --git a/packages/clerk-js/src/ui/components/Statements/index.ts b/packages/ui/src/components/Statements/index.ts similarity index 100% rename from packages/clerk-js/src/ui/components/Statements/index.ts rename to packages/ui/src/components/Statements/index.ts diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx b/packages/ui/src/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx rename to packages/ui/src/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/ui/src/components/SubscriptionDetails/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx rename to packages/ui/src/components/SubscriptionDetails/index.tsx diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx rename to packages/ui/src/components/Subscriptions/SubscriptionsList.tsx diff --git a/packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx b/packages/ui/src/components/Subscriptions/__tests__/SubscriptionsList.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx rename to packages/ui/src/components/Subscriptions/__tests__/SubscriptionsList.test.tsx diff --git a/packages/clerk-js/src/ui/components/Subscriptions/badge.tsx b/packages/ui/src/components/Subscriptions/badge.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Subscriptions/badge.tsx rename to packages/ui/src/components/Subscriptions/badge.tsx diff --git a/packages/clerk-js/src/ui/components/Subscriptions/index.tsx b/packages/ui/src/components/Subscriptions/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Subscriptions/index.tsx rename to packages/ui/src/components/Subscriptions/index.tsx diff --git a/packages/clerk-js/src/ui/components/UserAvatar/index.tsx b/packages/ui/src/components/UserAvatar/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserAvatar/index.tsx rename to packages/ui/src/components/UserAvatar/index.tsx diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/ui/src/components/UserButton/SessionActions.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx rename to packages/ui/src/components/UserButton/SessionActions.tsx index 7b09f4f38eb..cd2ec7e9d9d 100644 --- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx +++ b/packages/ui/src/components/UserButton/SessionActions.tsx @@ -1,11 +1,11 @@ import type { SignedInSessionResource } from '@clerk/shared/types'; +import type { ElementDescriptor, ElementId } from '@/customizables/elementDescriptors'; +import { useRouter } from '@/router'; import { Action, Actions, SmallAction, SmallActions } from '@/ui/elements/Actions'; import { PreviewButton } from '@/ui/elements/PreviewButton'; import { UserPreview } from '@/ui/elements/UserPreview'; -import type { ElementDescriptor, ElementId } from '../../../ui/customizables/elementDescriptors'; -import { useRouter } from '../../../ui/router'; import { USER_BUTTON_ITEM_ID } from '../../constants'; import { useUserButtonContext } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/ui/src/components/UserButton/UserButtonPopover.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx rename to packages/ui/src/components/UserButton/UserButtonPopover.tsx diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx similarity index 88% rename from packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx rename to packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx index a48c5ad40ee..1800efb4a69 100644 --- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx +++ b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx @@ -1,6 +1,6 @@ +import { getFullName, getIdentifier } from '@clerk/shared/internal/clerk-js/user'; import { useUser } from '@clerk/shared/react'; -import { getFullName, getIdentifier } from '../../../utils/user'; import { descriptors, Text } from '../../customizables'; type UserButtonTopLevelIdentifierProps = { diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/ui/src/components/UserButton/UserButtonTrigger.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx rename to packages/ui/src/components/UserButton/UserButtonTrigger.tsx diff --git a/packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx b/packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx rename to packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserButton/index.tsx b/packages/ui/src/components/UserButton/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserButton/index.tsx rename to packages/ui/src/components/UserButton/index.tsx diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/ui/src/components/UserButton/useMultisessionActions.tsx similarity index 95% rename from packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx rename to packages/ui/src/components/UserButton/useMultisessionActions.tsx index cb6e110363c..709fd29ecce 100644 --- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx +++ b/packages/ui/src/components/UserButton/useMultisessionActions.tsx @@ -1,12 +1,12 @@ +import { navigateIfTaskExists } from '@clerk/shared/internal/clerk-js/sessionTasks'; +import { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate'; import { useClerk } from '@clerk/shared/react'; import type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/shared/types'; -import { navigateIfTaskExists } from '@/core/sessionTasks'; import { useEnvironment } from '@/ui/contexts'; import { useCardState } from '@/ui/elements/contexts'; import { sleep } from '@/ui/utils/sleep'; -import { windowNavigate } from '../../../utils/windowNavigate'; import { useMultipleSessions } from '../../hooks/useMultipleSessions'; import { useRouter } from '../../router'; diff --git a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx b/packages/ui/src/components/UserProfile/AccountPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx rename to packages/ui/src/components/UserProfile/AccountPage.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/ui/src/components/UserProfile/ActiveDevicesSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx rename to packages/ui/src/components/UserProfile/ActiveDevicesSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx b/packages/ui/src/components/UserProfile/AddAuthenticatorApp.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx rename to packages/ui/src/components/UserProfile/AddAuthenticatorApp.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx b/packages/ui/src/components/UserProfile/ApiKeysPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx rename to packages/ui/src/components/UserProfile/ApiKeysPage.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/ui/src/components/UserProfile/BillingPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx rename to packages/ui/src/components/UserProfile/BillingPage.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsMenu.tsx b/packages/ui/src/components/UserProfile/ConnectedAccountsMenu.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsMenu.tsx rename to packages/ui/src/components/UserProfile/ConnectedAccountsMenu.tsx index c5f1fa8c65e..c821739d1ef 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsMenu.tsx +++ b/packages/ui/src/components/UserProfile/ConnectedAccountsMenu.tsx @@ -1,3 +1,4 @@ +import { appendModalState } from '@clerk/shared/internal/clerk-js/queryStateParams'; import { useReverification, useUser } from '@clerk/shared/react'; import type { OAuthProvider, OAuthStrategy } from '@clerk/shared/types'; @@ -6,7 +7,6 @@ import { ProfileSection } from '@/ui/elements/Section'; import { handleError } from '@/ui/utils/errorHandler'; import { sleep } from '@/ui/utils/sleep'; -import { appendModalState } from '../../../utils'; import { ProviderInitialIcon } from '../../common'; import { useUserProfileContext } from '../../contexts'; import { descriptors, Image, localizationKeys } from '../../customizables'; diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx rename to packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx index b26c7e2787d..eaa0e746ba4 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx +++ b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx @@ -1,3 +1,4 @@ +import { appendModalState } from '@clerk/shared/internal/clerk-js/queryStateParams'; import { useReverification, useUser } from '@clerk/shared/react'; import type { ExternalAccountResource, OAuthProvider, OAuthScope, OAuthStrategy } from '@clerk/shared/types'; import { Fragment, useState } from 'react'; @@ -8,7 +9,6 @@ import { ProfileSection } from '@/ui/elements/Section'; import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu'; import { handleError } from '@/ui/utils/errorHandler'; -import { appendModalState } from '../../../utils'; import { ProviderInitialIcon } from '../../common'; import { useUserProfileContext } from '../../contexts'; import { Box, Button, descriptors, Flex, Image, localizationKeys, Text } from '../../customizables'; @@ -148,7 +148,7 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) => // eslint-disable-next-line @typescript-eslint/no-non-null-assertion await navigate(response.verification!.externalVerificationRedirectURL?.href || ''); } - } catch (err) { + } catch (err: any) { handleError(err, [], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx b/packages/ui/src/components/UserProfile/DeleteSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx rename to packages/ui/src/components/UserProfile/DeleteSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/ui/src/components/UserProfile/DeleteUserForm.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx rename to packages/ui/src/components/UserProfile/DeleteUserForm.tsx index a45259975d7..68b90d01681 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx +++ b/packages/ui/src/components/UserProfile/DeleteUserForm.tsx @@ -47,7 +47,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) session: null, redirectUrl, }); - } catch (e) { + } catch (e: any) { handleError(e, [], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx b/packages/ui/src/components/UserProfile/EmailForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx rename to packages/ui/src/components/UserProfile/EmailForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/ui/src/components/UserProfile/EmailsSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx rename to packages/ui/src/components/UserProfile/EmailsSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx rename to packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx b/packages/ui/src/components/UserProfile/LinkButtonWithDescription.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx rename to packages/ui/src/components/UserProfile/LinkButtonWithDescription.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreateForm.tsx b/packages/ui/src/components/UserProfile/MfaBackupCodeCreateForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreateForm.tsx rename to packages/ui/src/components/UserProfile/MfaBackupCodeCreateForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx b/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx rename to packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx index c94fb66c146..898ee2bade5 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx +++ b/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx @@ -1,6 +1,6 @@ +import { getIdentifier } from '@clerk/shared/internal/clerk-js/user'; import { useUser } from '@clerk/shared/react'; -import { getIdentifier } from '../../../utils/user'; import { PrintableComponent, usePrintable } from '../../common'; import { useEnvironment } from '../../contexts'; import type { LocalizationKey } from '../../customizables'; diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeScreen.tsx b/packages/ui/src/components/UserProfile/MfaBackupCodeScreen.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeScreen.tsx rename to packages/ui/src/components/UserProfile/MfaBackupCodeScreen.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeTile.tsx b/packages/ui/src/components/UserProfile/MfaBackupCodeTile.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeTile.tsx rename to packages/ui/src/components/UserProfile/MfaBackupCodeTile.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaForm.tsx b/packages/ui/src/components/UserProfile/MfaForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaForm.tsx rename to packages/ui/src/components/UserProfile/MfaForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx rename to packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx index adeb6c4b607..52b4ea80701 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx +++ b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx @@ -102,7 +102,7 @@ const EnableMFAButtonForPhone = ( await setReservedForSecondFactor(); resourceRef.current = phone; onSuccess(); - } catch (err) { + } catch (err: any) { handleError(err, [], card.setError); } finally { card.setIdle(); @@ -141,7 +141,7 @@ export const MFAVerifyPhone = (props: MFAVerifyPhoneProps) => { await setReservedForSecondFactor(); resourceRef.current = phone; onSuccess(); - } catch (err) { + } catch (err: any) { handleError(err, [], card.setError); } finally { card.setIdle(); diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaScreens.tsx b/packages/ui/src/components/UserProfile/MfaScreens.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaScreens.tsx rename to packages/ui/src/components/UserProfile/MfaScreens.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx b/packages/ui/src/components/UserProfile/MfaSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx rename to packages/ui/src/components/UserProfile/MfaSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaTOTPScreen.tsx b/packages/ui/src/components/UserProfile/MfaTOTPScreen.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/MfaTOTPScreen.tsx rename to packages/ui/src/components/UserProfile/MfaTOTPScreen.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasskeySection.tsx b/packages/ui/src/components/UserProfile/PasskeySection.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/PasskeySection.tsx rename to packages/ui/src/components/UserProfile/PasskeySection.tsx index 90d49f34563..c3b09682e6f 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/PasskeySection.tsx +++ b/packages/ui/src/components/UserProfile/PasskeySection.tsx @@ -210,7 +210,7 @@ const AddPasskeyButton = ({ onClick }: { onClick?: () => void }) => { } try { await createPasskey(); - } catch (e) { + } catch (e: any) { handleError(e, [], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordForm.tsx b/packages/ui/src/components/UserProfile/PasswordForm.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/PasswordForm.tsx rename to packages/ui/src/components/UserProfile/PasswordForm.tsx index b788afb405f..5008325b90f 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/PasswordForm.tsx +++ b/packages/ui/src/components/UserProfile/PasswordForm.tsx @@ -35,6 +35,7 @@ const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boole type PasswordFormProps = FormProps; export const PasswordForm = withCardStateProvider((props: PasswordFormProps) => { + const { t, locale } = useLocalizations(); const { onSuccess, onReset } = props; const { user } = useUser(); const updatePasswordWithReverification = useReverification( @@ -95,8 +96,6 @@ export const PasswordForm = withCardStateProvider((props: PasswordFormProps) => confirmPasswordField: confirmField, }); - const { t, locale } = useLocalizations(); - const canSubmit = (currentPasswordRequired ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) && passwordField.value && @@ -125,7 +124,7 @@ export const PasswordForm = withCardStateProvider((props: PasswordFormProps) => await updatePasswordWithReverification(user, [opts]); onSuccess(); - } catch (e) { + } catch (e: any) { handleError(e, [currentPasswordField, passwordField, confirmField], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx b/packages/ui/src/components/UserProfile/PasswordSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx rename to packages/ui/src/components/UserProfile/PasswordSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx b/packages/ui/src/components/UserProfile/PhoneForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx rename to packages/ui/src/components/UserProfile/PhoneForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/ui/src/components/UserProfile/PhoneSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx rename to packages/ui/src/components/UserProfile/PhoneSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx b/packages/ui/src/components/UserProfile/PlansPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx rename to packages/ui/src/components/UserProfile/PlansPage.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/ProfileForm.tsx b/packages/ui/src/components/UserProfile/ProfileForm.tsx similarity index 98% rename from packages/clerk-js/src/ui/components/UserProfile/ProfileForm.tsx rename to packages/ui/src/components/UserProfile/ProfileForm.tsx index 245a8f94d20..629489cb806 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ProfileForm.tsx +++ b/packages/ui/src/components/UserProfile/ProfileForm.tsx @@ -10,9 +10,9 @@ import { InformationBox } from '@/ui/elements/InformationBox'; import { handleError } from '@/ui/utils/errorHandler'; import { useFormControl } from '@/ui/utils/useFormControl'; -import { isDefaultImage } from '../../../utils'; import { useEnvironment } from '../../contexts'; import { localizationKeys } from '../../customizables'; +import { isDefaultImage } from '../../utils/image'; import { UserProfileAvatarUploader } from './UserProfileAvatarUploader'; type ProfileFormProps = FormProps; diff --git a/packages/clerk-js/src/ui/components/UserProfile/RemoveResourceForm.tsx b/packages/ui/src/components/UserProfile/RemoveResourceForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/RemoveResourceForm.tsx rename to packages/ui/src/components/UserProfile/RemoveResourceForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/SecurityPage.tsx b/packages/ui/src/components/UserProfile/SecurityPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/SecurityPage.tsx rename to packages/ui/src/components/UserProfile/SecurityPage.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx b/packages/ui/src/components/UserProfile/UserProfileAvatarUploader.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx rename to packages/ui/src/components/UserProfile/UserProfileAvatarUploader.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx b/packages/ui/src/components/UserProfile/UserProfileNavbar.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx rename to packages/ui/src/components/UserProfile/UserProfileNavbar.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx rename to packages/ui/src/components/UserProfile/UserProfileRoutes.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/ui/src/components/UserProfile/UserProfileSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx rename to packages/ui/src/components/UserProfile/UserProfileSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx b/packages/ui/src/components/UserProfile/UsernameForm.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx rename to packages/ui/src/components/UserProfile/UsernameForm.tsx index b4a4bfcb1fc..afb15505565 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UsernameForm.tsx +++ b/packages/ui/src/components/UserProfile/UsernameForm.tsx @@ -44,7 +44,7 @@ export const UsernameForm = withCardStateProvider((props: UsernameFormProps) => try { await updateUsername(usernameField.value); onSuccess(); - } catch (e) { + } catch (e: any) { handleError(e, [usernameField], card.setError); } }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx b/packages/ui/src/components/UserProfile/UsernameSection.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx rename to packages/ui/src/components/UserProfile/UsernameSection.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx b/packages/ui/src/components/UserProfile/VerifyTOTP.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/VerifyTOTP.tsx rename to packages/ui/src/components/UserProfile/VerifyTOTP.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithCode.tsx b/packages/ui/src/components/UserProfile/VerifyWithCode.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/VerifyWithCode.tsx rename to packages/ui/src/components/UserProfile/VerifyWithCode.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx b/packages/ui/src/components/UserProfile/VerifyWithEnterpriseConnection.tsx similarity index 94% rename from packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx rename to packages/ui/src/components/UserProfile/VerifyWithEnterpriseConnection.tsx index cd5223f4a68..a85d0388b01 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx +++ b/packages/ui/src/components/UserProfile/VerifyWithEnterpriseConnection.tsx @@ -1,12 +1,12 @@ +import { appendModalState } from '@clerk/shared/internal/clerk-js/queryStateParams'; import type { EmailAddressResource } from '@clerk/shared/types'; import React from 'react'; +import { useRouter } from '@/router'; import { useCardState } from '@/ui/elements/contexts'; import { FormButtonContainer } from '@/ui/elements/FormButtons'; import { handleError } from '@/ui/utils/errorHandler'; -import { useRouter } from '../../../ui/router'; -import { appendModalState } from '../../../utils'; import { useUserProfileContext } from '../../contexts'; import { Button, descriptors, Flex, localizationKeys } from '../../customizables'; import { useEnterpriseSSOLink } from '../../hooks'; diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithLink.tsx b/packages/ui/src/components/UserProfile/VerifyWithLink.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/VerifyWithLink.tsx rename to packages/ui/src/components/UserProfile/VerifyWithLink.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx b/packages/ui/src/components/UserProfile/Web3Form.tsx similarity index 96% rename from packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx rename to packages/ui/src/components/UserProfile/Web3Form.tsx index 8ebea04501d..c6ad7a0de62 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/Web3Form.tsx +++ b/packages/ui/src/components/UserProfile/Web3Form.tsx @@ -1,3 +1,4 @@ +import { generateWeb3Signature, getWeb3Identifier } from '@clerk/shared/internal/clerk-js/web3'; import { useReverification, useUser } from '@clerk/shared/react'; import type { Web3Provider, Web3Strategy } from '@clerk/shared/types'; @@ -5,7 +6,6 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { ProfileSection } from '@/ui/elements/Section'; import { getFieldError, handleError } from '@/ui/utils/errorHandler'; -import { generateWeb3Signature, getWeb3Identifier } from '../../../utils/web3'; import { descriptors, Image, localizationKeys, Text } from '../../customizables'; import { useEnabledThirdPartyProviders } from '../../hooks'; @@ -41,7 +41,7 @@ export const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onC const signature = await generateWeb3Signature({ identifier, nonce: message, provider }); await web3Wallet?.attemptVerification({ signature }); card.setIdle(); - } catch (err) { + } catch (err: any) { card.setIdle(); const fieldError = getFieldError(err); if (fieldError) { diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/ui/src/components/UserProfile/Web3Section.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx rename to packages/ui/src/components/UserProfile/Web3Section.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/AccountPage.test.tsx b/packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/AccountPage.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx similarity index 97% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx index 4ad555d8874..d200066132d 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx +++ b/packages/ui/src/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx @@ -151,7 +151,7 @@ describe('ConnectedAccountsSection ', () => { // Still displays a remove button const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); @@ -185,7 +185,7 @@ describe('ConnectedAccountsSection ', () => { // Still displays a remove button const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); @@ -207,7 +207,7 @@ describe('ConnectedAccountsSection ', () => { // Still displays a remove button const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); @@ -227,7 +227,7 @@ describe('ConnectedAccountsSection ', () => { const item = getByText(/github/i); const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); await userEvent.click(getByRole('menuitem', { name: /remove/i })); @@ -247,7 +247,7 @@ describe('ConnectedAccountsSection ', () => { const item = getByText(/github/i); const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); await userEvent.click(getByRole('menuitem', { name: /remove/i })); @@ -264,7 +264,7 @@ describe('ConnectedAccountsSection ', () => { const item = getByText(/github/i); const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); await userEvent.click(getByRole('menuitem', { name: /remove/i })); @@ -285,7 +285,7 @@ describe('ConnectedAccountsSection ', () => { const item = getByText(/google/i); const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1]; await act(async () => { - await userEvent.click(menuButton!); + await userEvent.click(menuButton); }); getByRole('menuitem', { name: /remove/i }); await userEvent.click(getByRole('menuitem', { name: /remove/i })); diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailsSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailsSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/EnterpriseAccountsSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx b/packages/ui/src/components/UserProfile/__tests__/MfaPage.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/MfaPage.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/PasskeysSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/PasskeysSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/PasswordSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/PasswordSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/PhoneSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx b/packages/ui/src/components/UserProfile/__tests__/SecurityPage.test.tsx similarity index 99% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/SecurityPage.test.tsx index 47f8004c652..d059b444ba3 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx +++ b/packages/ui/src/components/UserProfile/__tests__/SecurityPage.test.tsx @@ -359,7 +359,7 @@ describe('SecurityPage', () => { const elem = d.parentElement?.parentElement?.parentElement?.parentElement; expect(elem).toBeDefined(); - const { getByText } = within(elem!); + const { getByText } = within(elem); getByText(/107.0.0.0/i); getByText(/Athens/i); getByText(/Greece/i); diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx b/packages/ui/src/components/UserProfile/__tests__/UserProfile.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/UserProfile.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfileSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/UserProfileSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfileSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/UserProfileSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernameSection.test.tsx b/packages/ui/src/components/UserProfile/__tests__/UsernameSection.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernameSection.test.tsx rename to packages/ui/src/components/UserProfile/__tests__/UsernameSection.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/utils.test.ts b/packages/ui/src/components/UserProfile/__tests__/utils.test.ts similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/__tests__/utils.test.ts rename to packages/ui/src/components/UserProfile/__tests__/utils.test.ts diff --git a/packages/clerk-js/src/ui/components/UserProfile/index.tsx b/packages/ui/src/components/UserProfile/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/index.tsx rename to packages/ui/src/components/UserProfile/index.tsx diff --git a/packages/clerk-js/src/ui/components/UserProfile/utils.ts b/packages/ui/src/components/UserProfile/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/UserProfile/utils.ts rename to packages/ui/src/components/UserProfile/utils.ts diff --git a/packages/clerk-js/src/ui/components/UserVerification/AlternativeMethods.tsx b/packages/ui/src/components/UserVerification/AlternativeMethods.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/AlternativeMethods.tsx rename to packages/ui/src/components/UserVerification/AlternativeMethods.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/HavingTrouble.tsx b/packages/ui/src/components/UserVerification/HavingTrouble.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/HavingTrouble.tsx rename to packages/ui/src/components/UserVerification/HavingTrouble.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorOneCodeForm.tsx b/packages/ui/src/components/UserVerification/UVFactorOneCodeForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorOneCodeForm.tsx rename to packages/ui/src/components/UserVerification/UVFactorOneCodeForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorOneEmailCodeCard.tsx b/packages/ui/src/components/UserVerification/UVFactorOneEmailCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorOneEmailCodeCard.tsx rename to packages/ui/src/components/UserVerification/UVFactorOneEmailCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorOnePasskeysCard.tsx b/packages/ui/src/components/UserVerification/UVFactorOnePasskeysCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorOnePasskeysCard.tsx rename to packages/ui/src/components/UserVerification/UVFactorOnePasskeysCard.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorOnePhoneCodeCard.tsx b/packages/ui/src/components/UserVerification/UVFactorOnePhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorOnePhoneCodeCard.tsx rename to packages/ui/src/components/UserVerification/UVFactorOnePhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoAlternativeMethods.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoAlternativeMethods.tsx rename to packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoBackupCodeCard.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoBackupCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoBackupCodeCard.tsx rename to packages/ui/src/components/UserVerification/UVFactorTwoBackupCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoCodeForm.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoCodeForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoCodeForm.tsx rename to packages/ui/src/components/UserVerification/UVFactorTwoCodeForm.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx rename to packages/ui/src/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOne.tsx b/packages/ui/src/components/UserVerification/UserVerificationFactorOne.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOne.tsx rename to packages/ui/src/components/UserVerification/UserVerificationFactorOne.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOnePassword.tsx b/packages/ui/src/components/UserVerification/UserVerificationFactorOnePassword.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOnePassword.tsx rename to packages/ui/src/components/UserVerification/UserVerificationFactorOnePassword.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwo.tsx b/packages/ui/src/components/UserVerification/UserVerificationFactorTwo.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwo.tsx rename to packages/ui/src/components/UserVerification/UserVerificationFactorTwo.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwoTOTP.tsx b/packages/ui/src/components/UserVerification/UserVerificationFactorTwoTOTP.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwoTOTP.tsx rename to packages/ui/src/components/UserVerification/UserVerificationFactorTwoTOTP.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx b/packages/ui/src/components/UserVerification/__tests__/UVFactorOne.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx rename to packages/ui/src/components/UserVerification/__tests__/UVFactorOne.test.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx b/packages/ui/src/components/UserVerification/__tests__/UVFactorTwo.test.tsx similarity index 85% rename from packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx rename to packages/ui/src/components/UserVerification/__tests__/UVFactorTwo.test.tsx index e56b1c0ab45..569073c8c85 100644 --- a/packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx +++ b/packages/ui/src/components/UserVerification/__tests__/UVFactorTwo.test.tsx @@ -21,12 +21,12 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'phone_code' }], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'phone_code' }], } as any); @@ -42,12 +42,12 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'totp' }], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'totp' }], } as any); @@ -62,12 +62,12 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'backup_code' }], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'backup_code' }], } as any); @@ -83,7 +83,7 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_first_factor', } as any); render(, { wrapper }); @@ -97,17 +97,17 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'phone_code' }], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [{ strategy: 'phone_code' }], } as any); - vi.spyOn(fixtures.session!, 'attemptSecondFactorVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'attemptSecondFactorVerification').mockResolvedValue({ status: 'complete', supportedSecondFactors: [], session: { @@ -131,7 +131,7 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [ { @@ -146,7 +146,7 @@ describe('UserVerificationFactorTwo', () => { }, ], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({} as any); + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({} as any); const { userEvent, findByText, getByText, findByRole } = render(, { wrapper, @@ -165,7 +165,7 @@ describe('UserVerificationFactorTwo', () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ username: 'clerkuser' }); }); - vi.spyOn(fixtures.session!, 'startVerification').mockResolvedValue({ + vi.spyOn(fixtures.session, 'startVerification').mockResolvedValue({ status: 'needs_second_factor', supportedSecondFactors: [ { @@ -180,7 +180,7 @@ describe('UserVerificationFactorTwo', () => { }, ], } as any); - vi.spyOn(fixtures.session!, 'prepareSecondFactorVerification').mockResolvedValue({} as any); + vi.spyOn(fixtures.session, 'prepareSecondFactorVerification').mockResolvedValue({} as any); const { userEvent, findByText, getByText, container } = render(, { wrapper }); diff --git a/packages/clerk-js/src/ui/components/UserVerification/index.tsx b/packages/ui/src/components/UserVerification/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/index.tsx rename to packages/ui/src/components/UserVerification/index.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/use-after-verification.ts b/packages/ui/src/components/UserVerification/use-after-verification.ts similarity index 94% rename from packages/clerk-js/src/ui/components/UserVerification/use-after-verification.ts rename to packages/ui/src/components/UserVerification/use-after-verification.ts index 27b4fb3e875..0507452dd28 100644 --- a/packages/clerk-js/src/ui/components/UserVerification/use-after-verification.ts +++ b/packages/ui/src/components/UserVerification/use-after-verification.ts @@ -1,8 +1,8 @@ +import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors'; import { useClerk } from '@clerk/shared/react'; import type { SessionVerificationResource } from '@clerk/shared/types'; import { useCallback } from 'react'; -import { clerkInvalidFAPIResponse } from '../../../core/errors'; import { useUserVerification } from '../../contexts'; import { useSupportEmail } from '../../hooks/useSupportEmail'; import { useRouter } from '../../router'; diff --git a/packages/clerk-js/src/ui/components/UserVerification/useReverificationAlternativeStrategies.ts b/packages/ui/src/components/UserVerification/useReverificationAlternativeStrategies.ts similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/useReverificationAlternativeStrategies.ts rename to packages/ui/src/components/UserVerification/useReverificationAlternativeStrategies.ts diff --git a/packages/clerk-js/src/ui/components/UserVerification/useUserVerificationSession.tsx b/packages/ui/src/components/UserVerification/useUserVerificationSession.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/useUserVerificationSession.tsx rename to packages/ui/src/components/UserVerification/useUserVerificationSession.tsx diff --git a/packages/clerk-js/src/ui/components/UserVerification/utils.ts b/packages/ui/src/components/UserVerification/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/utils.ts rename to packages/ui/src/components/UserVerification/utils.ts diff --git a/packages/clerk-js/src/ui/components/UserVerification/withHavingTrouble.tsx b/packages/ui/src/components/UserVerification/withHavingTrouble.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/UserVerification/withHavingTrouble.tsx rename to packages/ui/src/components/UserVerification/withHavingTrouble.tsx diff --git a/packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx b/packages/ui/src/components/Waitlist/WaitlistForm.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx rename to packages/ui/src/components/Waitlist/WaitlistForm.tsx diff --git a/packages/clerk-js/src/ui/components/Waitlist/__tests__/Waitlist.test.tsx b/packages/ui/src/components/Waitlist/__tests__/Waitlist.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Waitlist/__tests__/Waitlist.test.tsx rename to packages/ui/src/components/Waitlist/__tests__/Waitlist.test.tsx diff --git a/packages/clerk-js/src/ui/components/Waitlist/index.tsx b/packages/ui/src/components/Waitlist/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/Waitlist/index.tsx rename to packages/ui/src/components/Waitlist/index.tsx diff --git a/packages/clerk-js/src/ui/components/Waitlist/waitlistFormHelpers.ts b/packages/ui/src/components/Waitlist/waitlistFormHelpers.ts similarity index 100% rename from packages/clerk-js/src/ui/components/Waitlist/waitlistFormHelpers.ts rename to packages/ui/src/components/Waitlist/waitlistFormHelpers.ts diff --git a/packages/clerk-js/src/ui/components/prefetch-organization-list.tsx b/packages/ui/src/components/prefetch-organization-list.tsx similarity index 100% rename from packages/clerk-js/src/ui/components/prefetch-organization-list.tsx rename to packages/ui/src/components/prefetch-organization-list.tsx diff --git a/packages/clerk-js/src/ui/constants.ts b/packages/ui/src/constants.ts similarity index 100% rename from packages/clerk-js/src/ui/constants.ts rename to packages/ui/src/constants.ts diff --git a/packages/clerk-js/src/ui/contexts/AcceptedUserInvitations.tsx b/packages/ui/src/contexts/AcceptedUserInvitations.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/AcceptedUserInvitations.tsx rename to packages/ui/src/contexts/AcceptedUserInvitations.tsx diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/ui/src/contexts/ClerkUIComponentsContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx rename to packages/ui/src/contexts/ClerkUIComponentsContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx b/packages/ui/src/contexts/CoreClerkContextWrapper.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx rename to packages/ui/src/contexts/CoreClerkContextWrapper.tsx diff --git a/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx b/packages/ui/src/contexts/CoreClientContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/CoreClientContext.tsx rename to packages/ui/src/contexts/CoreClientContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx b/packages/ui/src/contexts/CoreSessionContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/CoreSessionContext.tsx rename to packages/ui/src/contexts/CoreSessionContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/CoreUserContext.tsx b/packages/ui/src/contexts/CoreUserContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/CoreUserContext.tsx rename to packages/ui/src/contexts/CoreUserContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/EnvironmentContext.tsx b/packages/ui/src/contexts/EnvironmentContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/EnvironmentContext.tsx rename to packages/ui/src/contexts/EnvironmentContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/OptionsContext.tsx b/packages/ui/src/contexts/OptionsContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/OptionsContext.tsx rename to packages/ui/src/contexts/OptionsContext.tsx diff --git a/packages/clerk-js/src/ui/contexts/components/ApiKeys.ts b/packages/ui/src/contexts/components/ApiKeys.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/ApiKeys.ts rename to packages/ui/src/contexts/components/ApiKeys.ts diff --git a/packages/clerk-js/src/ui/contexts/components/Checkout.ts b/packages/ui/src/contexts/components/Checkout.ts similarity index 94% rename from packages/clerk-js/src/ui/contexts/components/Checkout.ts rename to packages/ui/src/contexts/components/Checkout.ts index 394fd243507..e9173d4d1b8 100644 --- a/packages/clerk-js/src/ui/contexts/components/Checkout.ts +++ b/packages/ui/src/contexts/components/Checkout.ts @@ -1,7 +1,7 @@ +import { isAllowedRedirect } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import { createContext, useContext, useMemo } from 'react'; -import { isAllowedRedirect } from '../../../utils'; import type { CheckoutCtx } from '../../types'; import { useOptions } from '../OptionsContext'; diff --git a/packages/clerk-js/src/ui/contexts/components/CreateOrganization.ts b/packages/ui/src/contexts/components/CreateOrganization.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/CreateOrganization.ts rename to packages/ui/src/contexts/components/CreateOrganization.ts diff --git a/packages/clerk-js/src/ui/contexts/components/GoogleOneTap.ts b/packages/ui/src/contexts/components/GoogleOneTap.ts similarity index 95% rename from packages/clerk-js/src/ui/contexts/components/GoogleOneTap.ts rename to packages/ui/src/contexts/components/GoogleOneTap.ts index 6f46e2c4760..457b1e00d45 100644 --- a/packages/clerk-js/src/ui/contexts/components/GoogleOneTap.ts +++ b/packages/ui/src/contexts/components/GoogleOneTap.ts @@ -1,8 +1,8 @@ +import { RedirectUrls } from '@clerk/shared/internal/clerk-js/redirectUrls'; +import { buildURL } from '@clerk/shared/internal/clerk-js/url'; import type { HandleOAuthCallbackParams } from '@clerk/shared/types'; import { createContext, useCallback, useContext } from 'react'; -import { buildURL } from '../../../utils'; -import { RedirectUrls } from '../../../utils/redirectUrls'; import { useEnvironment, useOptions } from '../../contexts'; import { useRouter } from '../../router'; import type { GoogleOneTapCtx } from '../../types'; diff --git a/packages/clerk-js/src/ui/contexts/components/OAuthConsent.ts b/packages/ui/src/contexts/components/OAuthConsent.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/OAuthConsent.ts rename to packages/ui/src/contexts/components/OAuthConsent.ts diff --git a/packages/clerk-js/src/ui/contexts/components/OrganizationList.ts b/packages/ui/src/contexts/components/OrganizationList.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/OrganizationList.ts rename to packages/ui/src/contexts/components/OrganizationList.ts diff --git a/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts b/packages/ui/src/contexts/components/OrganizationProfile.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts rename to packages/ui/src/contexts/components/OrganizationProfile.ts diff --git a/packages/clerk-js/src/ui/contexts/components/OrganizationSwitcher.ts b/packages/ui/src/contexts/components/OrganizationSwitcher.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/OrganizationSwitcher.ts rename to packages/ui/src/contexts/components/OrganizationSwitcher.ts diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/ui/src/contexts/components/Plans.tsx similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/Plans.tsx rename to packages/ui/src/contexts/components/Plans.tsx diff --git a/packages/clerk-js/src/ui/contexts/components/PricingTable.ts b/packages/ui/src/contexts/components/PricingTable.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/PricingTable.ts rename to packages/ui/src/contexts/components/PricingTable.ts diff --git a/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts b/packages/ui/src/contexts/components/SessionTasks.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/SessionTasks.ts rename to packages/ui/src/contexts/components/SessionTasks.ts diff --git a/packages/clerk-js/src/ui/contexts/components/SignIn.ts b/packages/ui/src/contexts/components/SignIn.ts similarity index 95% rename from packages/clerk-js/src/ui/contexts/components/SignIn.ts rename to packages/ui/src/contexts/components/SignIn.ts index ef07c2f095f..161a8704c1d 100644 --- a/packages/clerk-js/src/ui/contexts/components/SignIn.ts +++ b/packages/ui/src/contexts/components/SignIn.ts @@ -1,13 +1,12 @@ +import { SIGN_IN_INITIAL_VALUE_KEYS } from '@clerk/shared/internal/clerk-js/constants'; +import { RedirectUrls } from '@clerk/shared/internal/clerk-js/redirectUrls'; +import { getTaskEndpoint } from '@clerk/shared/internal/clerk-js/sessionTasks'; +import { buildURL } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import type { SessionResource } from '@clerk/shared/types'; import { isAbsoluteUrl } from '@clerk/shared/url'; import { createContext, useContext, useMemo } from 'react'; -import { getTaskEndpoint } from '@/core/sessionTasks'; - -import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants'; -import { buildURL } from '../../../utils'; -import { RedirectUrls } from '../../../utils/redirectUrls'; import { buildRedirectUrl, MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects'; import { useEnvironment, useOptions } from '../../contexts'; import type { ParsedQueryString } from '../../router'; diff --git a/packages/clerk-js/src/ui/contexts/components/SignOut.ts b/packages/ui/src/contexts/components/SignOut.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/SignOut.ts rename to packages/ui/src/contexts/components/SignOut.ts diff --git a/packages/clerk-js/src/ui/contexts/components/SignUp.ts b/packages/ui/src/contexts/components/SignUp.ts similarity index 95% rename from packages/clerk-js/src/ui/contexts/components/SignUp.ts rename to packages/ui/src/contexts/components/SignUp.ts index 783b610918b..3c8107bf9c1 100644 --- a/packages/clerk-js/src/ui/contexts/components/SignUp.ts +++ b/packages/ui/src/contexts/components/SignUp.ts @@ -1,13 +1,12 @@ +import { SIGN_UP_INITIAL_VALUE_KEYS } from '@clerk/shared/internal/clerk-js/constants'; +import { RedirectUrls } from '@clerk/shared/internal/clerk-js/redirectUrls'; +import { getTaskEndpoint, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@clerk/shared/internal/clerk-js/sessionTasks'; +import { buildURL } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import type { SessionResource } from '@clerk/shared/types'; import { isAbsoluteUrl } from '@clerk/shared/url'; import { createContext, useContext, useMemo } from 'react'; -import { getTaskEndpoint, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks'; - -import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants'; -import { buildURL } from '../../../utils'; -import { RedirectUrls } from '../../../utils/redirectUrls'; import { buildRedirectUrl, MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects'; import { useEnvironment, useOptions } from '../../contexts'; import type { ParsedQueryString } from '../../router'; diff --git a/packages/clerk-js/src/ui/contexts/components/SubscriberType.ts b/packages/ui/src/contexts/components/SubscriberType.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/SubscriberType.ts rename to packages/ui/src/contexts/components/SubscriberType.ts diff --git a/packages/clerk-js/src/ui/contexts/components/SubscriptionDetails.ts b/packages/ui/src/contexts/components/SubscriptionDetails.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/SubscriptionDetails.ts rename to packages/ui/src/contexts/components/SubscriptionDetails.ts diff --git a/packages/clerk-js/src/ui/contexts/components/UserAvatar.ts b/packages/ui/src/contexts/components/UserAvatar.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/UserAvatar.ts rename to packages/ui/src/contexts/components/UserAvatar.ts diff --git a/packages/clerk-js/src/ui/contexts/components/UserButton.ts b/packages/ui/src/contexts/components/UserButton.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/UserButton.ts rename to packages/ui/src/contexts/components/UserButton.ts diff --git a/packages/clerk-js/src/ui/contexts/components/UserProfile.ts b/packages/ui/src/contexts/components/UserProfile.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/UserProfile.ts rename to packages/ui/src/contexts/components/UserProfile.ts diff --git a/packages/clerk-js/src/ui/contexts/components/UserVerification.ts b/packages/ui/src/contexts/components/UserVerification.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/UserVerification.ts rename to packages/ui/src/contexts/components/UserVerification.ts diff --git a/packages/clerk-js/src/ui/contexts/components/Waitlist.ts b/packages/ui/src/contexts/components/Waitlist.ts similarity index 95% rename from packages/clerk-js/src/ui/contexts/components/Waitlist.ts rename to packages/ui/src/contexts/components/Waitlist.ts index 767a37ee12d..eda29b2db08 100644 --- a/packages/clerk-js/src/ui/contexts/components/Waitlist.ts +++ b/packages/ui/src/contexts/components/Waitlist.ts @@ -1,6 +1,6 @@ +import { buildURL } from '@clerk/shared/internal/clerk-js/url'; import { createContext, useContext, useMemo } from 'react'; -import { buildURL } from '../../../utils'; import { useEnvironment, useOptions } from '../../contexts'; import { useRouter } from '../../router'; import type { WaitlistCtx } from '../../types'; diff --git a/packages/clerk-js/src/ui/contexts/components/index.ts b/packages/ui/src/contexts/components/index.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/index.ts rename to packages/ui/src/contexts/components/index.ts diff --git a/packages/clerk-js/src/ui/contexts/index.ts b/packages/ui/src/contexts/index.ts similarity index 100% rename from packages/clerk-js/src/ui/contexts/index.ts rename to packages/ui/src/contexts/index.ts diff --git a/packages/clerk-js/src/ui/contexts/utils.ts b/packages/ui/src/contexts/utils.ts similarity index 81% rename from packages/clerk-js/src/ui/contexts/utils.ts rename to packages/ui/src/contexts/utils.ts index ea944e46928..423f5151701 100644 --- a/packages/clerk-js/src/ui/contexts/utils.ts +++ b/packages/ui/src/contexts/utils.ts @@ -1,8 +1,11 @@ +import { + clerkCoreErrorContextProviderNotFound, + clerkCoreErrorNoClerkSingleton, +} from '@clerk/shared/internal/clerk-js/errors'; import type { Clerk } from '@clerk/shared/types'; import { snakeToCamel } from '@clerk/shared/underscore'; -import { clerkCoreErrorContextProviderNotFound, clerkCoreErrorNoClerkSingleton } from '../../core/errors'; -import { createDynamicParamParser } from '../../utils'; +import { createDynamicParamParser } from '../utils/dynamicParamParser'; export function assertClerkSingletonExists(clerk: Clerk | undefined): asserts clerk is Clerk { if (!clerk) { diff --git a/packages/clerk-js/src/ui/customizables/AppearanceContext.tsx b/packages/ui/src/customizables/AppearanceContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/AppearanceContext.tsx rename to packages/ui/src/customizables/AppearanceContext.tsx diff --git a/packages/clerk-js/src/ui/customizables/Flow.tsx b/packages/ui/src/customizables/Flow.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/Flow.tsx rename to packages/ui/src/customizables/Flow.tsx diff --git a/packages/clerk-js/src/ui/customizables/__tests__/FlowRoot.spec.tsx b/packages/ui/src/customizables/__tests__/FlowRoot.spec.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/FlowRoot.spec.tsx rename to packages/ui/src/customizables/__tests__/FlowRoot.spec.tsx diff --git a/packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx b/packages/ui/src/customizables/__tests__/elementDescriptors.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/elementDescriptors.test.tsx rename to packages/ui/src/customizables/__tests__/elementDescriptors.test.tsx diff --git a/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx b/packages/ui/src/customizables/__tests__/makeCustomizable.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx rename to packages/ui/src/customizables/__tests__/makeCustomizable.test.tsx diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/ui/src/customizables/__tests__/parseAppearance.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx rename to packages/ui/src/customizables/__tests__/parseAppearance.test.tsx diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseVariables.test.ts b/packages/ui/src/customizables/__tests__/parseVariables.test.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/parseVariables.test.ts rename to packages/ui/src/customizables/__tests__/parseVariables.test.ts diff --git a/packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts b/packages/ui/src/customizables/__tests__/test-utils.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/__tests__/test-utils.ts rename to packages/ui/src/customizables/__tests__/test-utils.ts diff --git a/packages/clerk-js/src/ui/customizables/classGeneration.ts b/packages/ui/src/customizables/classGeneration.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/classGeneration.ts rename to packages/ui/src/customizables/classGeneration.ts diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/ui/src/customizables/elementDescriptors.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/elementDescriptors.ts rename to packages/ui/src/customizables/elementDescriptors.ts diff --git a/packages/clerk-js/src/ui/customizables/index.ts b/packages/ui/src/customizables/index.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/index.ts rename to packages/ui/src/customizables/index.ts diff --git a/packages/clerk-js/src/ui/customizables/makeCustomizable.tsx b/packages/ui/src/customizables/makeCustomizable.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/makeCustomizable.tsx rename to packages/ui/src/customizables/makeCustomizable.tsx diff --git a/packages/clerk-js/src/ui/customizables/makeResponsive.tsx b/packages/ui/src/customizables/makeResponsive.tsx similarity index 94% rename from packages/clerk-js/src/ui/customizables/makeResponsive.tsx rename to packages/ui/src/customizables/makeResponsive.tsx index 128a4a59c2b..fede7879af0 100644 --- a/packages/clerk-js/src/ui/customizables/makeResponsive.tsx +++ b/packages/ui/src/customizables/makeResponsive.tsx @@ -1,7 +1,6 @@ +import { isDataUri, isValidUrl } from '@clerk/shared/internal/clerk-js/url'; import React from 'react'; -import { isDataUri, isValidUrl } from '../../utils'; - type Responsive> = T & { size?: number; xDescriptors?: number[]; @@ -59,6 +58,10 @@ const generateSrc = ({ src, width }: { src?: string; width: number }) => { return src; } + if (typeof src !== 'string') { + return src; + } + const newSrc = new URL(src); if (width) { newSrc.searchParams.append('width', width?.toString()); diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/ui/src/customizables/parseAppearance.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/parseAppearance.ts rename to packages/ui/src/customizables/parseAppearance.ts diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/ui/src/customizables/parseVariables.ts similarity index 100% rename from packages/clerk-js/src/ui/customizables/parseVariables.ts rename to packages/ui/src/customizables/parseVariables.ts diff --git a/packages/clerk-js/src/ui/customizables/sanitizeDomProps.tsx b/packages/ui/src/customizables/sanitizeDomProps.tsx similarity index 100% rename from packages/clerk-js/src/ui/customizables/sanitizeDomProps.tsx rename to packages/ui/src/customizables/sanitizeDomProps.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx b/packages/ui/src/elements/Action/ActionCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/ActionCard.tsx rename to packages/ui/src/elements/Action/ActionCard.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/ActionClosed.tsx b/packages/ui/src/elements/Action/ActionClosed.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/ActionClosed.tsx rename to packages/ui/src/elements/Action/ActionClosed.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/ActionOpen.tsx b/packages/ui/src/elements/Action/ActionOpen.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/ActionOpen.tsx rename to packages/ui/src/elements/Action/ActionOpen.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/ActionRoot.tsx b/packages/ui/src/elements/Action/ActionRoot.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/ActionRoot.tsx rename to packages/ui/src/elements/Action/ActionRoot.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/ActionTrigger.tsx b/packages/ui/src/elements/Action/ActionTrigger.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/ActionTrigger.tsx rename to packages/ui/src/elements/Action/ActionTrigger.tsx diff --git a/packages/clerk-js/src/ui/elements/Action/index.tsx b/packages/ui/src/elements/Action/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Action/index.tsx rename to packages/ui/src/elements/Action/index.tsx diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/ui/src/elements/Actions.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Actions.tsx rename to packages/ui/src/elements/Actions.tsx diff --git a/packages/clerk-js/src/ui/elements/Alert.tsx b/packages/ui/src/elements/Alert.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Alert.tsx rename to packages/ui/src/elements/Alert.tsx diff --git a/packages/clerk-js/src/ui/elements/Animated.tsx b/packages/ui/src/elements/Animated.tsx similarity index 90% rename from packages/clerk-js/src/ui/elements/Animated.tsx rename to packages/ui/src/elements/Animated.tsx index e1f8e0f477c..6a7598cfa46 100644 --- a/packages/clerk-js/src/ui/elements/Animated.tsx +++ b/packages/ui/src/elements/Animated.tsx @@ -1,7 +1,7 @@ import { useAutoAnimate } from '@formkit/auto-animate/react'; import { cloneElement, type PropsWithChildren } from 'react'; -import { useAppearance } from '../../ui/customizables'; +import { useAppearance } from '@/customizables'; type AnimatedProps = PropsWithChildren<{ asChild?: boolean }>; diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/ui/src/elements/ApplicationLogo.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ApplicationLogo.tsx rename to packages/ui/src/elements/ApplicationLogo.tsx diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/ui/src/elements/ArrowBlockButton.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx rename to packages/ui/src/elements/ArrowBlockButton.tsx diff --git a/packages/clerk-js/src/ui/elements/Avatar.tsx b/packages/ui/src/elements/Avatar.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Avatar.tsx rename to packages/ui/src/elements/Avatar.tsx diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/ui/src/elements/AvatarUploader.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/AvatarUploader.tsx rename to packages/ui/src/elements/AvatarUploader.tsx diff --git a/packages/clerk-js/src/ui/elements/BackLink.tsx b/packages/ui/src/elements/BackLink.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/BackLink.tsx rename to packages/ui/src/elements/BackLink.tsx diff --git a/packages/clerk-js/src/ui/elements/Badge.tsx b/packages/ui/src/elements/Badge.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Badge.tsx rename to packages/ui/src/elements/Badge.tsx diff --git a/packages/clerk-js/src/ui/elements/CaptchaElement.tsx b/packages/ui/src/elements/CaptchaElement.tsx similarity index 96% rename from packages/clerk-js/src/ui/elements/CaptchaElement.tsx rename to packages/ui/src/elements/CaptchaElement.tsx index 7d52a7f6d6f..86e2e93853b 100644 --- a/packages/clerk-js/src/ui/elements/CaptchaElement.tsx +++ b/packages/ui/src/elements/CaptchaElement.tsx @@ -1,6 +1,6 @@ +import { CAPTCHA_ELEMENT_ID } from '@clerk/shared/internal/clerk-js/constants'; import { useEffect, useRef } from 'react'; -import { CAPTCHA_ELEMENT_ID } from '../../utils/captcha/constants'; import { Box, useAppearance, useLocalizations } from '../customizables'; /** diff --git a/packages/clerk-js/src/ui/elements/Card/CardAction.tsx b/packages/ui/src/elements/Card/CardAction.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardAction.tsx rename to packages/ui/src/elements/Card/CardAction.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/CardAlert.tsx b/packages/ui/src/elements/Card/CardAlert.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardAlert.tsx rename to packages/ui/src/elements/Card/CardAlert.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx rename to packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/ui/src/elements/Card/CardContent.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardContent.tsx rename to packages/ui/src/elements/Card/CardContent.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/ui/src/elements/Card/CardFooter.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardFooter.tsx rename to packages/ui/src/elements/Card/CardFooter.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx b/packages/ui/src/elements/Card/CardRoot.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/CardRoot.tsx rename to packages/ui/src/elements/Card/CardRoot.tsx diff --git a/packages/clerk-js/src/ui/elements/Card/index.ts b/packages/ui/src/elements/Card/index.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/Card/index.ts rename to packages/ui/src/elements/Card/index.ts diff --git a/packages/clerk-js/src/ui/elements/ClipboardInput.tsx b/packages/ui/src/elements/ClipboardInput.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ClipboardInput.tsx rename to packages/ui/src/elements/ClipboardInput.tsx diff --git a/packages/clerk-js/src/ui/elements/CodeControl.tsx b/packages/ui/src/elements/CodeControl.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/CodeControl.tsx rename to packages/ui/src/elements/CodeControl.tsx diff --git a/packages/clerk-js/src/ui/elements/DataTable.tsx b/packages/ui/src/elements/DataTable.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/DataTable.tsx rename to packages/ui/src/elements/DataTable.tsx diff --git a/packages/clerk-js/src/ui/elements/DevModeNotice.tsx b/packages/ui/src/elements/DevModeNotice.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/DevModeNotice.tsx rename to packages/ui/src/elements/DevModeNotice.tsx diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/ui/src/elements/Divider.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Divider.tsx rename to packages/ui/src/elements/Divider.tsx diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/ui/src/elements/Drawer.tsx similarity index 99% rename from packages/clerk-js/src/ui/elements/Drawer.tsx rename to packages/ui/src/elements/Drawer.tsx index 6cd3df06c25..fdacf3b852b 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/ui/src/elements/Drawer.tsx @@ -13,9 +13,9 @@ import { } from '@floating-ui/react'; import * as React from 'react'; -import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions'; import type { LocalizationKey } from '../customizables'; import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables'; +import { transitionDurationValues, transitionTiming } from '../foundations/transitions'; import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks'; import { Close as CloseIcon } from '../icons'; import type { ThemableCssProp } from '../styledSystem'; diff --git a/packages/clerk-js/src/ui/elements/ErrorCard.tsx b/packages/ui/src/elements/ErrorCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ErrorCard.tsx rename to packages/ui/src/elements/ErrorCard.tsx diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/ui/src/elements/FieldControl.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FieldControl.tsx rename to packages/ui/src/elements/FieldControl.tsx diff --git a/packages/clerk-js/src/ui/elements/Form.tsx b/packages/ui/src/elements/Form.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Form.tsx rename to packages/ui/src/elements/Form.tsx diff --git a/packages/clerk-js/src/ui/elements/FormButtons.tsx b/packages/ui/src/elements/FormButtons.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FormButtons.tsx rename to packages/ui/src/elements/FormButtons.tsx diff --git a/packages/clerk-js/src/ui/elements/FormContainer.tsx b/packages/ui/src/elements/FormContainer.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FormContainer.tsx rename to packages/ui/src/elements/FormContainer.tsx diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/ui/src/elements/FormControl.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FormControl.tsx rename to packages/ui/src/elements/FormControl.tsx diff --git a/packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx b/packages/ui/src/elements/FormattedPhoneNumber.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx rename to packages/ui/src/elements/FormattedPhoneNumber.tsx diff --git a/packages/clerk-js/src/ui/elements/FullHeightLoader.tsx b/packages/ui/src/elements/FullHeightLoader.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/FullHeightLoader.tsx rename to packages/ui/src/elements/FullHeightLoader.tsx diff --git a/packages/clerk-js/src/ui/elements/Gauge.tsx b/packages/ui/src/elements/Gauge.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Gauge.tsx rename to packages/ui/src/elements/Gauge.tsx diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/ui/src/elements/Header.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Header.tsx rename to packages/ui/src/elements/Header.tsx diff --git a/packages/clerk-js/src/ui/elements/IconButton.tsx b/packages/ui/src/elements/IconButton.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/IconButton.tsx rename to packages/ui/src/elements/IconButton.tsx diff --git a/packages/clerk-js/src/ui/elements/IconCircle.tsx b/packages/ui/src/elements/IconCircle.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/IconCircle.tsx rename to packages/ui/src/elements/IconCircle.tsx diff --git a/packages/clerk-js/src/ui/elements/IdentityPreview.tsx b/packages/ui/src/elements/IdentityPreview.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/IdentityPreview.tsx rename to packages/ui/src/elements/IdentityPreview.tsx diff --git a/packages/clerk-js/src/ui/elements/InformationBox.tsx b/packages/ui/src/elements/InformationBox.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/InformationBox.tsx rename to packages/ui/src/elements/InformationBox.tsx diff --git a/packages/clerk-js/src/ui/elements/InputGroup.tsx b/packages/ui/src/elements/InputGroup.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/InputGroup.tsx rename to packages/ui/src/elements/InputGroup.tsx diff --git a/packages/clerk-js/src/ui/elements/InputWithIcon.tsx b/packages/ui/src/elements/InputWithIcon.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/InputWithIcon.tsx rename to packages/ui/src/elements/InputWithIcon.tsx diff --git a/packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx b/packages/ui/src/elements/InvisibleRootBox.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx rename to packages/ui/src/elements/InvisibleRootBox.tsx diff --git a/packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx b/packages/ui/src/elements/LegalConsentCheckbox.tsx similarity index 98% rename from packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx rename to packages/ui/src/elements/LegalConsentCheckbox.tsx index f4ae0de0597..e9ae27b16d4 100644 --- a/packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx +++ b/packages/ui/src/elements/LegalConsentCheckbox.tsx @@ -1,4 +1,5 @@ -import { useEnvironment } from '../../ui/contexts'; +import { useEnvironment } from '@/contexts'; + import type { LocalizationKey } from '../customizables'; import { descriptors, diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/ui/src/elements/LineItems.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/LineItems.tsx rename to packages/ui/src/elements/LineItems.tsx diff --git a/packages/clerk-js/src/ui/elements/LinkRenderer.tsx b/packages/ui/src/elements/LinkRenderer.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/LinkRenderer.tsx rename to packages/ui/src/elements/LinkRenderer.tsx diff --git a/packages/clerk-js/src/ui/elements/LoadingCard.tsx b/packages/ui/src/elements/LoadingCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/LoadingCard.tsx rename to packages/ui/src/elements/LoadingCard.tsx diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/ui/src/elements/Menu.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Menu.tsx rename to packages/ui/src/elements/Menu.tsx diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/ui/src/elements/Modal.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Modal.tsx rename to packages/ui/src/elements/Modal.tsx diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/ui/src/elements/Navbar.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Navbar.tsx rename to packages/ui/src/elements/Navbar.tsx diff --git a/packages/clerk-js/src/ui/elements/OrganizationAvatar.tsx b/packages/ui/src/elements/OrganizationAvatar.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/OrganizationAvatar.tsx rename to packages/ui/src/elements/OrganizationAvatar.tsx diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/ui/src/elements/OrganizationPreview.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/OrganizationPreview.tsx rename to packages/ui/src/elements/OrganizationPreview.tsx diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/ui/src/elements/Pagination.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Pagination.tsx rename to packages/ui/src/elements/Pagination.tsx diff --git a/packages/clerk-js/src/ui/elements/PasswordInput.tsx b/packages/ui/src/elements/PasswordInput.tsx similarity index 98% rename from packages/clerk-js/src/ui/elements/PasswordInput.tsx rename to packages/ui/src/elements/PasswordInput.tsx index ec85dc5b6e1..a0da4cd8f84 100644 --- a/packages/clerk-js/src/ui/elements/PasswordInput.tsx +++ b/packages/ui/src/elements/PasswordInput.tsx @@ -1,8 +1,8 @@ +import { DEBOUNCE_MS } from '@clerk/shared/internal/clerk-js/constants'; import type { ClerkAPIError } from '@clerk/shared/types'; import type { ChangeEvent } from 'react'; import React, { forwardRef, useRef, useState } from 'react'; -import { DEBOUNCE_MS } from '../../core/constants'; import { useEnvironment } from '../contexts'; import { descriptors, Flex, Input, localizationKeys, useLocalizations } from '../customizables'; import { usePassword } from '../hooks/usePassword'; diff --git a/packages/clerk-js/src/ui/elements/PersonalWorkspacePreview.tsx b/packages/ui/src/elements/PersonalWorkspacePreview.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/PersonalWorkspacePreview.tsx rename to packages/ui/src/elements/PersonalWorkspacePreview.tsx diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts b/packages/ui/src/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts rename to packages/ui/src/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/countryCodeData.ts b/packages/ui/src/elements/PhoneInput/countryCodeData.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/PhoneInput/countryCodeData.ts rename to packages/ui/src/elements/PhoneInput/countryCodeData.ts diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/index.tsx b/packages/ui/src/elements/PhoneInput/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/PhoneInput/index.tsx rename to packages/ui/src/elements/PhoneInput/index.tsx diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/useFormattedPhoneNumber.ts b/packages/ui/src/elements/PhoneInput/useFormattedPhoneNumber.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/PhoneInput/useFormattedPhoneNumber.ts rename to packages/ui/src/elements/PhoneInput/useFormattedPhoneNumber.ts diff --git a/packages/clerk-js/src/ui/elements/Popover.tsx b/packages/ui/src/elements/Popover.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Popover.tsx rename to packages/ui/src/elements/Popover.tsx diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/ui/src/elements/PopoverCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/PopoverCard.tsx rename to packages/ui/src/elements/PopoverCard.tsx diff --git a/packages/clerk-js/src/ui/elements/Portal.tsx b/packages/ui/src/elements/Portal.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Portal.tsx rename to packages/ui/src/elements/Portal.tsx diff --git a/packages/clerk-js/src/ui/elements/PreviewButton.tsx b/packages/ui/src/elements/PreviewButton.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/PreviewButton.tsx rename to packages/ui/src/elements/PreviewButton.tsx diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx rename to packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx rename to packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/index.ts b/packages/ui/src/elements/ProfileCard/index.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/ProfileCard/index.ts rename to packages/ui/src/elements/ProfileCard/index.ts diff --git a/packages/clerk-js/src/ui/elements/RadioGroup.tsx b/packages/ui/src/elements/RadioGroup.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/RadioGroup.tsx rename to packages/ui/src/elements/RadioGroup.tsx diff --git a/packages/clerk-js/src/ui/elements/ReversibleContainer.tsx b/packages/ui/src/elements/ReversibleContainer.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ReversibleContainer.tsx rename to packages/ui/src/elements/ReversibleContainer.tsx diff --git a/packages/clerk-js/src/ui/elements/RootBox.tsx b/packages/ui/src/elements/RootBox.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/RootBox.tsx rename to packages/ui/src/elements/RootBox.tsx diff --git a/packages/clerk-js/src/ui/elements/RouterLink.tsx b/packages/ui/src/elements/RouterLink.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/RouterLink.tsx rename to packages/ui/src/elements/RouterLink.tsx diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/ui/src/elements/Section.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Section.tsx rename to packages/ui/src/elements/Section.tsx diff --git a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx b/packages/ui/src/elements/SegmentedControl.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/SegmentedControl.tsx rename to packages/ui/src/elements/SegmentedControl.tsx diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/ui/src/elements/Select.tsx similarity index 99% rename from packages/clerk-js/src/ui/elements/Select.tsx rename to packages/ui/src/elements/Select.tsx index 77a76187bca..8851645f873 100644 --- a/packages/clerk-js/src/ui/elements/Select.tsx +++ b/packages/ui/src/elements/Select.tsx @@ -430,7 +430,6 @@ export const SelectButton = ( elementDescriptor={descriptors.selectButtonIcon} elementId={descriptors.selectButtonIcon.setId(elementId)} size='md' - /* @ts-expect-error FIXME: icon prop typing */ icon={icon || ChevronDown} sx={iconSx} /> diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/ui/src/elements/SocialButtons.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/SocialButtons.tsx rename to packages/ui/src/elements/SocialButtons.tsx diff --git a/packages/clerk-js/src/ui/elements/SuccessPage.tsx b/packages/ui/src/elements/SuccessPage.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/SuccessPage.tsx rename to packages/ui/src/elements/SuccessPage.tsx diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/ui/src/elements/Switch.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Switch.tsx rename to packages/ui/src/elements/Switch.tsx diff --git a/packages/clerk-js/src/ui/elements/Tabs.tsx b/packages/ui/src/elements/Tabs.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Tabs.tsx rename to packages/ui/src/elements/Tabs.tsx diff --git a/packages/clerk-js/src/ui/elements/TagInput.tsx b/packages/ui/src/elements/TagInput.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/TagInput.tsx rename to packages/ui/src/elements/TagInput.tsx diff --git a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx b/packages/ui/src/elements/ThreeDotsMenu.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx rename to packages/ui/src/elements/ThreeDotsMenu.tsx diff --git a/packages/clerk-js/src/ui/elements/TimerButton.tsx b/packages/ui/src/elements/TimerButton.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/TimerButton.tsx rename to packages/ui/src/elements/TimerButton.tsx diff --git a/packages/clerk-js/src/ui/elements/Tooltip.tsx b/packages/ui/src/elements/Tooltip.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/Tooltip.tsx rename to packages/ui/src/elements/Tooltip.tsx diff --git a/packages/clerk-js/src/ui/elements/UserAvatar.tsx b/packages/ui/src/elements/UserAvatar.tsx similarity index 90% rename from packages/clerk-js/src/ui/elements/UserAvatar.tsx rename to packages/ui/src/elements/UserAvatar.tsx index 58137b16683..5f406ec4ae4 100644 --- a/packages/clerk-js/src/ui/elements/UserAvatar.tsx +++ b/packages/ui/src/elements/UserAvatar.tsx @@ -1,6 +1,6 @@ +import { getFullName, getInitials } from '@clerk/shared/internal/clerk-js/user'; import type { UserResource } from '@clerk/shared/types'; -import { getFullName, getInitials } from '../../utils/user'; import type { PropsOfComponent } from '../styledSystem'; import { Avatar } from './Avatar'; diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/ui/src/elements/UserPreview.tsx similarity index 98% rename from packages/clerk-js/src/ui/elements/UserPreview.tsx rename to packages/ui/src/elements/UserPreview.tsx index 94cb280d73f..a1c67ac9bc8 100644 --- a/packages/clerk-js/src/ui/elements/UserPreview.tsx +++ b/packages/ui/src/elements/UserPreview.tsx @@ -1,7 +1,7 @@ +import { getFullName, getIdentifier } from '@clerk/shared/internal/clerk-js/user'; import type { ExternalAccountResource, SamlAccountResource, UserPreviewId, UserResource } from '@clerk/shared/types'; import React from 'react'; -import { getFullName, getIdentifier } from '../../utils/user'; import type { LocalizationKey } from '../customizables'; import { descriptors, Flex, Text, useLocalizations } from '../customizables'; import type { InternalTheme, PropsOfComponent, ThemableCssProp } from '../styledSystem'; diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/ui/src/elements/VerificationCodeCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx rename to packages/ui/src/elements/VerificationCodeCard.tsx diff --git a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx b/packages/ui/src/elements/VerificationLinkCard.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx rename to packages/ui/src/elements/VerificationLinkCard.tsx diff --git a/packages/clerk-js/src/ui/elements/__mocks__/@formkit/auto-animate/react/index.ts b/packages/ui/src/elements/__mocks__/@formkit/auto-animate/react/index.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/__mocks__/@formkit/auto-animate/react/index.ts rename to packages/ui/src/elements/__mocks__/@formkit/auto-animate/react/index.ts diff --git a/packages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsx b/packages/ui/src/elements/__tests__/CodeControl.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/__tests__/CodeControl.test.tsx rename to packages/ui/src/elements/__tests__/CodeControl.test.tsx diff --git a/packages/clerk-js/src/ui/elements/__tests__/LinkRenderer.test.tsx b/packages/ui/src/elements/__tests__/LinkRenderer.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/__tests__/LinkRenderer.test.tsx rename to packages/ui/src/elements/__tests__/LinkRenderer.test.tsx diff --git a/packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx b/packages/ui/src/elements/__tests__/PlainInput.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx rename to packages/ui/src/elements/__tests__/PlainInput.test.tsx diff --git a/packages/clerk-js/src/ui/elements/__tests__/RadioGroup.test.tsx b/packages/ui/src/elements/__tests__/RadioGroup.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/__tests__/RadioGroup.test.tsx rename to packages/ui/src/elements/__tests__/RadioGroup.test.tsx diff --git a/packages/clerk-js/src/ui/elements/__tests__/TimerButton.test.tsx b/packages/ui/src/elements/__tests__/TimerButton.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/__tests__/TimerButton.test.tsx rename to packages/ui/src/elements/__tests__/TimerButton.test.tsx diff --git a/packages/clerk-js/src/ui/elements/contexts/index.tsx b/packages/ui/src/elements/contexts/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/contexts/index.tsx rename to packages/ui/src/elements/contexts/index.tsx diff --git a/packages/clerk-js/src/ui/elements/utils.ts b/packages/ui/src/elements/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/elements/utils.ts rename to packages/ui/src/elements/utils.ts diff --git a/packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx b/packages/ui/src/elements/withAvatarShimmer.tsx similarity index 100% rename from packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx rename to packages/ui/src/elements/withAvatarShimmer.tsx diff --git a/packages/ui/src/emotion.d.ts b/packages/ui/src/emotion.d.ts new file mode 100644 index 00000000000..3a67ab677ac --- /dev/null +++ b/packages/ui/src/emotion.d.ts @@ -0,0 +1,9 @@ +// eslint-disable-next-line no-restricted-imports +import '@emotion/react'; + +import type { InternalTheme } from './foundations'; + +declare module '@emotion/react' { + // eslint-disable-next-line @typescript-eslint/no-empty-object-type + export interface Theme extends InternalTheme {} +} diff --git a/packages/clerk-js/src/ui/foundations/__tests__/createInternalTheme.test.ts b/packages/ui/src/foundations/__tests__/createInternalTheme.test.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/__tests__/createInternalTheme.test.ts rename to packages/ui/src/foundations/__tests__/createInternalTheme.test.ts diff --git a/packages/clerk-js/src/ui/foundations/borders.ts b/packages/ui/src/foundations/borders.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/borders.ts rename to packages/ui/src/foundations/borders.ts diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/ui/src/foundations/colors.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/colors.ts rename to packages/ui/src/foundations/colors.ts diff --git a/packages/clerk-js/src/ui/foundations/createInternalTheme.ts b/packages/ui/src/foundations/createInternalTheme.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/createInternalTheme.ts rename to packages/ui/src/foundations/createInternalTheme.ts diff --git a/packages/clerk-js/src/ui/foundations/defaultFoundations.ts b/packages/ui/src/foundations/defaultFoundations.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/defaultFoundations.ts rename to packages/ui/src/foundations/defaultFoundations.ts diff --git a/packages/clerk-js/src/ui/foundations/index.ts b/packages/ui/src/foundations/index.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/index.ts rename to packages/ui/src/foundations/index.ts diff --git a/packages/clerk-js/src/ui/foundations/opacity.ts b/packages/ui/src/foundations/opacity.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/opacity.ts rename to packages/ui/src/foundations/opacity.ts diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/ui/src/foundations/shadows.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/shadows.ts rename to packages/ui/src/foundations/shadows.ts diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/ui/src/foundations/sizes.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/sizes.ts rename to packages/ui/src/foundations/sizes.ts diff --git a/packages/clerk-js/src/ui/foundations/transitions.ts b/packages/ui/src/foundations/transitions.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/transitions.ts rename to packages/ui/src/foundations/transitions.ts diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/ui/src/foundations/typography.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/typography.ts rename to packages/ui/src/foundations/typography.ts diff --git a/packages/clerk-js/src/ui/foundations/zIndices.ts b/packages/ui/src/foundations/zIndices.ts similarity index 100% rename from packages/clerk-js/src/ui/foundations/zIndices.ts rename to packages/ui/src/foundations/zIndices.ts diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts new file mode 100644 index 00000000000..beb3101eebe --- /dev/null +++ b/packages/ui/src/global.d.ts @@ -0,0 +1,28 @@ +import type { Clerk } from '@clerk/shared/types'; + +import type { MountComponentRenderer } from './Components'; +declare module '*.svg' { + const value: React.FC>; + export default value; +} + +declare global { + // New rspack build constants + declare const __DEV__: boolean; + declare const PACKAGE_NAME: string; + declare const PACKAGE_VERSION: string; + declare const __PKG_VERSION__: string; + declare const __BUILD_DISABLE_RHC__: string; + interface Window { + Clerk?: Clerk & { __internal_last_error?: any }; + + /** + * Unstable API for accessing UI components separately from clerk-js. + * This is injected by the @clerk/ui browser bundle. + */ + __unstable_ClerkUi?: { + mountComponentRenderer: MountComponentRenderer; + version: string; + }; + } +} diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx b/packages/ui/src/hooks/__tests__/useCoreOrganization.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx rename to packages/ui/src/hooks/__tests__/useCoreOrganization.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx b/packages/ui/src/hooks/__tests__/useCoreOrganizationList.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx rename to packages/ui/src/hooks/__tests__/useCoreOrganizationList.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useDevMode.test.tsx b/packages/ui/src/hooks/__tests__/useDevMode.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useDevMode.test.tsx rename to packages/ui/src/hooks/__tests__/useDevMode.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useDirection.test.ts b/packages/ui/src/hooks/__tests__/useDirection.test.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useDirection.test.ts rename to packages/ui/src/hooks/__tests__/useDirection.test.ts diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx b/packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx rename to packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx b/packages/ui/src/hooks/__tests__/usePasswordComplexity.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx rename to packages/ui/src/hooks/__tests__/usePasswordComplexity.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx b/packages/ui/src/hooks/__tests__/useSupportEmail.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/__tests__/useSupportEmail.test.tsx rename to packages/ui/src/hooks/__tests__/useSupportEmail.test.tsx diff --git a/packages/clerk-js/src/ui/hooks/index.ts b/packages/ui/src/hooks/index.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/index.ts rename to packages/ui/src/hooks/index.ts diff --git a/packages/clerk-js/src/ui/hooks/useAlternativeStrategies.ts b/packages/ui/src/hooks/useAlternativeStrategies.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useAlternativeStrategies.ts rename to packages/ui/src/hooks/useAlternativeStrategies.ts diff --git a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx b/packages/ui/src/hooks/useClerkModalStateParams.tsx similarity index 74% rename from packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx rename to packages/ui/src/hooks/useClerkModalStateParams.tsx index 282559ea50f..9a1a3eec21f 100644 --- a/packages/clerk-js/src/ui/hooks/useClerkModalStateParams.tsx +++ b/packages/ui/src/hooks/useClerkModalStateParams.tsx @@ -1,8 +1,8 @@ +import { CLERK_MODAL_STATE } from '@clerk/shared/internal/clerk-js/constants'; +import { removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams'; +import { readStateParam } from '@clerk/shared/internal/clerk-js/queryStateParams'; import React from 'react'; -import { CLERK_MODAL_STATE } from '../../core/constants'; -import { readStateParam, removeClerkQueryParam } from '../../utils'; - export const useClerkModalStateParams = () => { const [state, setState] = React.useState({ startPath: '', path: '', componentName: '', socialProvider: '' }); const decodedRedirectParams = readStateParam(); diff --git a/packages/clerk-js/src/ui/hooks/useClipboard.ts b/packages/ui/src/hooks/useClipboard.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useClipboard.ts rename to packages/ui/src/hooks/useClipboard.ts diff --git a/packages/clerk-js/src/ui/hooks/useDebounce.ts b/packages/ui/src/hooks/useDebounce.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useDebounce.ts rename to packages/ui/src/hooks/useDebounce.ts diff --git a/packages/clerk-js/src/ui/hooks/useDevMode.tsx b/packages/ui/src/hooks/useDevMode.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/useDevMode.tsx rename to packages/ui/src/hooks/useDevMode.tsx diff --git a/packages/clerk-js/src/ui/hooks/useDirection.ts b/packages/ui/src/hooks/useDirection.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useDirection.ts rename to packages/ui/src/hooks/useDirection.ts diff --git a/packages/clerk-js/src/ui/hooks/useEmailLink.ts b/packages/ui/src/hooks/useEmailLink.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useEmailLink.ts rename to packages/ui/src/hooks/useEmailLink.ts diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx similarity index 100% rename from packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx rename to packages/ui/src/hooks/useEnabledThirdPartyProviders.tsx diff --git a/packages/clerk-js/src/ui/hooks/useEnterpriseSSOLink.ts b/packages/ui/src/hooks/useEnterpriseSSOLink.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useEnterpriseSSOLink.ts rename to packages/ui/src/hooks/useEnterpriseSSOLink.ts diff --git a/packages/clerk-js/src/ui/hooks/useFetch.ts b/packages/ui/src/hooks/useFetch.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useFetch.ts rename to packages/ui/src/hooks/useFetch.ts diff --git a/packages/clerk-js/src/ui/hooks/useFetchRoles.ts b/packages/ui/src/hooks/useFetchRoles.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useFetchRoles.ts rename to packages/ui/src/hooks/useFetchRoles.ts diff --git a/packages/clerk-js/src/ui/hooks/useInView.ts b/packages/ui/src/hooks/useInView.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useInView.ts rename to packages/ui/src/hooks/useInView.ts diff --git a/packages/clerk-js/src/ui/hooks/useLoadingStatus.ts b/packages/ui/src/hooks/useLoadingStatus.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useLoadingStatus.ts rename to packages/ui/src/hooks/useLoadingStatus.ts diff --git a/packages/clerk-js/src/ui/hooks/useMultipleSessions.ts b/packages/ui/src/hooks/useMultipleSessions.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useMultipleSessions.ts rename to packages/ui/src/hooks/useMultipleSessions.ts diff --git a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts b/packages/ui/src/hooks/useNavigateToFlowStart.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts rename to packages/ui/src/hooks/useNavigateToFlowStart.ts diff --git a/packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts b/packages/ui/src/hooks/useOrganizationListInView.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts rename to packages/ui/src/hooks/useOrganizationListInView.ts diff --git a/packages/clerk-js/src/ui/hooks/usePassword.ts b/packages/ui/src/hooks/usePassword.ts similarity index 90% rename from packages/clerk-js/src/ui/hooks/usePassword.ts rename to packages/ui/src/hooks/usePassword.ts index aee9553081d..17029308599 100644 --- a/packages/clerk-js/src/ui/hooks/usePassword.ts +++ b/packages/ui/src/hooks/usePassword.ts @@ -1,11 +1,12 @@ +import type { UsePasswordCbs, UsePasswordConfig } from '@clerk/shared/internal/clerk-js/passwords/password'; +import { createValidatePassword } from '@clerk/shared/internal/clerk-js/passwords/password'; import type { PasswordValidation } from '@clerk/shared/types'; import { noop } from '@clerk/shared/utils'; import { useCallback, useMemo } from 'react'; -import type { UsePasswordCbs, UsePasswordConfig } from '../../utils/passwords/password'; -import { createValidatePassword } from '../../utils/passwords/password'; import { localizationKeys, useLocalizations } from '../localization'; import type { FormControlState } from '../utils/useFormControl'; +import { loadZxcvbn } from '../utils/zxcvbn'; import { generateErrorTextUtil } from './usePasswordComplexity'; export const usePassword = (config: UsePasswordConfig, callbacks?: UsePasswordCbs) => { @@ -63,11 +64,11 @@ export const usePassword = (config: UsePasswordConfig, callbacks?: UsePasswordCb ); const validatePassword = useMemo(() => { - return createValidatePassword(config, { + return createValidatePassword(loadZxcvbn, config, { onValidation: onValidate, onValidationComplexity, }); - }, [onValidate]); + }, [onValidate, config]); return { validatePassword, diff --git a/packages/clerk-js/src/ui/hooks/usePasswordComplexity.ts b/packages/ui/src/hooks/usePasswordComplexity.ts similarity index 93% rename from packages/clerk-js/src/ui/hooks/usePasswordComplexity.ts rename to packages/ui/src/hooks/usePasswordComplexity.ts index 1a676e56321..c97a298a1a0 100644 --- a/packages/clerk-js/src/ui/hooks/usePasswordComplexity.ts +++ b/packages/ui/src/hooks/usePasswordComplexity.ts @@ -1,7 +1,10 @@ +import type { + ComplexityErrors, + UsePasswordComplexityConfig, +} from '@clerk/shared/internal/clerk-js/passwords/complexity'; +import { validate } from '@clerk/shared/internal/clerk-js/passwords/complexity'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import type { ComplexityErrors, UsePasswordComplexityConfig } from '../../utils/passwords/complexity'; -import { validate } from '../../utils/passwords/complexity'; import type { LocalizationKey } from '../localization'; import { localizationKeys, useLocalizations } from '../localization'; import { addFullStop, createListFormat } from '../utils/passwordUtils'; @@ -77,7 +80,7 @@ export const usePasswordComplexity = (config: UsePasswordComplexityConfig) => { return generateErrorTextUtil({ config, t, - locale, + locale: locale || 'en', failedValidations, }); }, diff --git a/packages/clerk-js/src/ui/hooks/usePopover.ts b/packages/ui/src/hooks/usePopover.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/usePopover.ts rename to packages/ui/src/hooks/usePopover.ts diff --git a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts b/packages/ui/src/hooks/usePrefersReducedMotion.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts rename to packages/ui/src/hooks/usePrefersReducedMotion.ts diff --git a/packages/clerk-js/src/ui/hooks/usePreloadTasks.ts b/packages/ui/src/hooks/usePreloadTasks.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/usePreloadTasks.ts rename to packages/ui/src/hooks/usePreloadTasks.ts diff --git a/packages/clerk-js/src/ui/hooks/useSafeState.ts b/packages/ui/src/hooks/useSafeState.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useSafeState.ts rename to packages/ui/src/hooks/useSafeState.ts diff --git a/packages/clerk-js/src/ui/hooks/useScrollLock.ts b/packages/ui/src/hooks/useScrollLock.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useScrollLock.ts rename to packages/ui/src/hooks/useScrollLock.ts diff --git a/packages/clerk-js/src/ui/hooks/useSearchInput.ts b/packages/ui/src/hooks/useSearchInput.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useSearchInput.ts rename to packages/ui/src/hooks/useSearchInput.ts diff --git a/packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts b/packages/ui/src/hooks/useSetSessionWithTimeout.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useSetSessionWithTimeout.ts rename to packages/ui/src/hooks/useSetSessionWithTimeout.ts diff --git a/packages/clerk-js/src/ui/hooks/useSupportEmail.ts b/packages/ui/src/hooks/useSupportEmail.ts similarity index 90% rename from packages/clerk-js/src/ui/hooks/useSupportEmail.ts rename to packages/ui/src/hooks/useSupportEmail.ts index 1b4fb27676f..4ecfa7d745d 100644 --- a/packages/clerk-js/src/ui/hooks/useSupportEmail.ts +++ b/packages/ui/src/hooks/useSupportEmail.ts @@ -1,7 +1,7 @@ +import { buildEmailAddress } from '@clerk/shared/internal/clerk-js/email'; import { useClerk } from '@clerk/shared/react'; import React from 'react'; -import { buildEmailAddress } from '../../utils'; import { useEnvironment, useOptions } from '../contexts'; export function useSupportEmail(): string { diff --git a/packages/clerk-js/src/ui/hooks/useTabState.ts b/packages/ui/src/hooks/useTabState.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useTabState.ts rename to packages/ui/src/hooks/useTabState.ts diff --git a/packages/clerk-js/src/ui/hooks/useWindowEventListener.ts b/packages/ui/src/hooks/useWindowEventListener.ts similarity index 100% rename from packages/clerk-js/src/ui/hooks/useWindowEventListener.ts rename to packages/ui/src/hooks/useWindowEventListener.ts diff --git a/packages/clerk-js/src/ui/icons/add.svg b/packages/ui/src/icons/add.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/add.svg rename to packages/ui/src/icons/add.svg diff --git a/packages/clerk-js/src/ui/icons/apple-pay.svg b/packages/ui/src/icons/apple-pay.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/apple-pay.svg rename to packages/ui/src/icons/apple-pay.svg diff --git a/packages/clerk-js/src/ui/icons/arrow-left.svg b/packages/ui/src/icons/arrow-left.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/arrow-left.svg rename to packages/ui/src/icons/arrow-left.svg diff --git a/packages/clerk-js/src/ui/icons/arrow-right-button.svg b/packages/ui/src/icons/arrow-right-button.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/arrow-right-button.svg rename to packages/ui/src/icons/arrow-right-button.svg diff --git a/packages/clerk-js/src/ui/icons/arrow-right.svg b/packages/ui/src/icons/arrow-right.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/arrow-right.svg rename to packages/ui/src/icons/arrow-right.svg diff --git a/packages/clerk-js/src/ui/icons/arrows-up-down.svg b/packages/ui/src/icons/arrows-up-down.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/arrows-up-down.svg rename to packages/ui/src/icons/arrows-up-down.svg diff --git a/packages/clerk-js/src/ui/icons/auth-app.svg b/packages/ui/src/icons/auth-app.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/auth-app.svg rename to packages/ui/src/icons/auth-app.svg diff --git a/packages/clerk-js/src/ui/icons/billing.svg b/packages/ui/src/icons/billing.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/billing.svg rename to packages/ui/src/icons/billing.svg diff --git a/packages/clerk-js/src/ui/icons/block.svg b/packages/ui/src/icons/block.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/block.svg rename to packages/ui/src/icons/block.svg diff --git a/packages/clerk-js/src/ui/icons/caret-left.svg b/packages/ui/src/icons/caret-left.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/caret-left.svg rename to packages/ui/src/icons/caret-left.svg diff --git a/packages/clerk-js/src/ui/icons/caret-right.svg b/packages/ui/src/icons/caret-right.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/caret-right.svg rename to packages/ui/src/icons/caret-right.svg diff --git a/packages/clerk-js/src/ui/icons/caret.svg b/packages/ui/src/icons/caret.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/caret.svg rename to packages/ui/src/icons/caret.svg diff --git a/packages/clerk-js/src/ui/icons/chat-alt.svg b/packages/ui/src/icons/chat-alt.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/chat-alt.svg rename to packages/ui/src/icons/chat-alt.svg diff --git a/packages/clerk-js/src/ui/icons/check-circle.svg b/packages/ui/src/icons/check-circle.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/check-circle.svg rename to packages/ui/src/icons/check-circle.svg diff --git a/packages/clerk-js/src/ui/icons/check.svg b/packages/ui/src/icons/check.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/check.svg rename to packages/ui/src/icons/check.svg diff --git a/packages/clerk-js/src/ui/icons/checkmark-filled.svg b/packages/ui/src/icons/checkmark-filled.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/checkmark-filled.svg rename to packages/ui/src/icons/checkmark-filled.svg diff --git a/packages/clerk-js/src/ui/icons/chevron-down.svg b/packages/ui/src/icons/chevron-down.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/chevron-down.svg rename to packages/ui/src/icons/chevron-down.svg diff --git a/packages/clerk-js/src/ui/icons/chevron-up-down.svg b/packages/ui/src/icons/chevron-up-down.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/chevron-up-down.svg rename to packages/ui/src/icons/chevron-up-down.svg diff --git a/packages/clerk-js/src/ui/icons/clipboard-outline.svg b/packages/ui/src/icons/clipboard-outline.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/clipboard-outline.svg rename to packages/ui/src/icons/clipboard-outline.svg diff --git a/packages/clerk-js/src/ui/icons/clipboard.svg b/packages/ui/src/icons/clipboard.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/clipboard.svg rename to packages/ui/src/icons/clipboard.svg diff --git a/packages/clerk-js/src/ui/icons/close.svg b/packages/ui/src/icons/close.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/close.svg rename to packages/ui/src/icons/close.svg diff --git a/packages/clerk-js/src/ui/icons/code.svg b/packages/ui/src/icons/code.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/code.svg rename to packages/ui/src/icons/code.svg diff --git a/packages/clerk-js/src/ui/icons/cog-filled.svg b/packages/ui/src/icons/cog-filled.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/cog-filled.svg rename to packages/ui/src/icons/cog-filled.svg diff --git a/packages/clerk-js/src/ui/icons/cog.svg b/packages/ui/src/icons/cog.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/cog.svg rename to packages/ui/src/icons/cog.svg diff --git a/packages/clerk-js/src/ui/icons/copy.svg b/packages/ui/src/icons/copy.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/copy.svg rename to packages/ui/src/icons/copy.svg diff --git a/packages/clerk-js/src/ui/icons/credit-card.svg b/packages/ui/src/icons/credit-card.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/credit-card.svg rename to packages/ui/src/icons/credit-card.svg diff --git a/packages/clerk-js/src/ui/icons/device-laptop.svg b/packages/ui/src/icons/device-laptop.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/device-laptop.svg rename to packages/ui/src/icons/device-laptop.svg diff --git a/packages/clerk-js/src/ui/icons/device-mobile.svg b/packages/ui/src/icons/device-mobile.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/device-mobile.svg rename to packages/ui/src/icons/device-mobile.svg diff --git a/packages/clerk-js/src/ui/icons/dot-circle-horizontal.svg b/packages/ui/src/icons/dot-circle-horizontal.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/dot-circle-horizontal.svg rename to packages/ui/src/icons/dot-circle-horizontal.svg diff --git a/packages/clerk-js/src/ui/icons/download.svg b/packages/ui/src/icons/download.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/download.svg rename to packages/ui/src/icons/download.svg diff --git a/packages/clerk-js/src/ui/icons/email.svg b/packages/ui/src/icons/email.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/email.svg rename to packages/ui/src/icons/email.svg diff --git a/packages/clerk-js/src/ui/icons/exclamation-circle.svg b/packages/ui/src/icons/exclamation-circle.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/exclamation-circle.svg rename to packages/ui/src/icons/exclamation-circle.svg diff --git a/packages/clerk-js/src/ui/icons/exclamation-triangle.svg b/packages/ui/src/icons/exclamation-triangle.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/exclamation-triangle.svg rename to packages/ui/src/icons/exclamation-triangle.svg diff --git a/packages/clerk-js/src/ui/icons/eye-slash.svg b/packages/ui/src/icons/eye-slash.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/eye-slash.svg rename to packages/ui/src/icons/eye-slash.svg diff --git a/packages/clerk-js/src/ui/icons/eye.svg b/packages/ui/src/icons/eye.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/eye.svg rename to packages/ui/src/icons/eye.svg diff --git a/packages/clerk-js/src/ui/icons/fingerprint.svg b/packages/ui/src/icons/fingerprint.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/fingerprint.svg rename to packages/ui/src/icons/fingerprint.svg diff --git a/packages/clerk-js/src/ui/icons/folder.svg b/packages/ui/src/icons/folder.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/folder.svg rename to packages/ui/src/icons/folder.svg diff --git a/packages/clerk-js/src/ui/icons/generic-pay.svg b/packages/ui/src/icons/generic-pay.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/generic-pay.svg rename to packages/ui/src/icons/generic-pay.svg diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/ui/src/icons/index.ts similarity index 100% rename from packages/clerk-js/src/ui/icons/index.ts rename to packages/ui/src/icons/index.ts diff --git a/packages/clerk-js/src/ui/icons/information-circle.svg b/packages/ui/src/icons/information-circle.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/information-circle.svg rename to packages/ui/src/icons/information-circle.svg diff --git a/packages/clerk-js/src/ui/icons/link.svg b/packages/ui/src/icons/link.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/link.svg rename to packages/ui/src/icons/link.svg diff --git a/packages/clerk-js/src/ui/icons/lock-closed.svg b/packages/ui/src/icons/lock-closed.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/lock-closed.svg rename to packages/ui/src/icons/lock-closed.svg diff --git a/packages/clerk-js/src/ui/icons/lock-dotted-circle.svg b/packages/ui/src/icons/lock-dotted-circle.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/lock-dotted-circle.svg rename to packages/ui/src/icons/lock-dotted-circle.svg diff --git a/packages/clerk-js/src/ui/icons/logo-mark-new.svg b/packages/ui/src/icons/logo-mark-new.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/logo-mark-new.svg rename to packages/ui/src/icons/logo-mark-new.svg diff --git a/packages/clerk-js/src/ui/icons/logo-mark.svg b/packages/ui/src/icons/logo-mark.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/logo-mark.svg rename to packages/ui/src/icons/logo-mark.svg diff --git a/packages/clerk-js/src/ui/icons/magnifying-glass.svg b/packages/ui/src/icons/magnifying-glass.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/magnifying-glass.svg rename to packages/ui/src/icons/magnifying-glass.svg diff --git a/packages/clerk-js/src/ui/icons/menu.svg b/packages/ui/src/icons/menu.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/menu.svg rename to packages/ui/src/icons/menu.svg diff --git a/packages/clerk-js/src/ui/icons/minus.svg b/packages/ui/src/icons/minus.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/minus.svg rename to packages/ui/src/icons/minus.svg diff --git a/packages/clerk-js/src/ui/icons/mobile-small.svg b/packages/ui/src/icons/mobile-small.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/mobile-small.svg rename to packages/ui/src/icons/mobile-small.svg diff --git a/packages/clerk-js/src/ui/icons/mobile.svg b/packages/ui/src/icons/mobile.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/mobile.svg rename to packages/ui/src/icons/mobile.svg diff --git a/packages/clerk-js/src/ui/icons/organization.svg b/packages/ui/src/icons/organization.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/organization.svg rename to packages/ui/src/icons/organization.svg diff --git a/packages/clerk-js/src/ui/icons/pencil-edit.svg b/packages/ui/src/icons/pencil-edit.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/pencil-edit.svg rename to packages/ui/src/icons/pencil-edit.svg diff --git a/packages/clerk-js/src/ui/icons/pencil.svg b/packages/ui/src/icons/pencil.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/pencil.svg rename to packages/ui/src/icons/pencil.svg diff --git a/packages/clerk-js/src/ui/icons/plans.svg b/packages/ui/src/icons/plans.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/plans.svg rename to packages/ui/src/icons/plans.svg diff --git a/packages/clerk-js/src/ui/icons/plus.svg b/packages/ui/src/icons/plus.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/plus.svg rename to packages/ui/src/icons/plus.svg diff --git a/packages/clerk-js/src/ui/icons/print.svg b/packages/ui/src/icons/print.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/print.svg rename to packages/ui/src/icons/print.svg diff --git a/packages/clerk-js/src/ui/icons/question-mark.svg b/packages/ui/src/icons/question-mark.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/question-mark.svg rename to packages/ui/src/icons/question-mark.svg diff --git a/packages/clerk-js/src/ui/icons/request-auth.svg b/packages/ui/src/icons/request-auth.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/request-auth.svg rename to packages/ui/src/icons/request-auth.svg diff --git a/packages/clerk-js/src/ui/icons/rotate-left-right.svg b/packages/ui/src/icons/rotate-left-right.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/rotate-left-right.svg rename to packages/ui/src/icons/rotate-left-right.svg diff --git a/packages/clerk-js/src/ui/icons/selector.svg b/packages/ui/src/icons/selector.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/selector.svg rename to packages/ui/src/icons/selector.svg diff --git a/packages/clerk-js/src/ui/icons/signout-double.svg b/packages/ui/src/icons/signout-double.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/signout-double.svg rename to packages/ui/src/icons/signout-double.svg diff --git a/packages/clerk-js/src/ui/icons/signout.svg b/packages/ui/src/icons/signout.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/signout.svg rename to packages/ui/src/icons/signout.svg diff --git a/packages/clerk-js/src/ui/icons/spinner-jumbo.svg b/packages/ui/src/icons/spinner-jumbo.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/spinner-jumbo.svg rename to packages/ui/src/icons/spinner-jumbo.svg diff --git a/packages/clerk-js/src/ui/icons/switch-arrow-right.svg b/packages/ui/src/icons/switch-arrow-right.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/switch-arrow-right.svg rename to packages/ui/src/icons/switch-arrow-right.svg diff --git a/packages/clerk-js/src/ui/icons/switch-arrows.svg b/packages/ui/src/icons/switch-arrows.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/switch-arrows.svg rename to packages/ui/src/icons/switch-arrows.svg diff --git a/packages/clerk-js/src/ui/icons/threeDots.svg b/packages/ui/src/icons/threeDots.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/threeDots.svg rename to packages/ui/src/icons/threeDots.svg diff --git a/packages/clerk-js/src/ui/icons/tick-shield.svg b/packages/ui/src/icons/tick-shield.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/tick-shield.svg rename to packages/ui/src/icons/tick-shield.svg diff --git a/packages/clerk-js/src/ui/icons/times.svg b/packages/ui/src/icons/times.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/times.svg rename to packages/ui/src/icons/times.svg diff --git a/packages/clerk-js/src/ui/icons/trash.svg b/packages/ui/src/icons/trash.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/trash.svg rename to packages/ui/src/icons/trash.svg diff --git a/packages/clerk-js/src/ui/icons/upload.svg b/packages/ui/src/icons/upload.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/upload.svg rename to packages/ui/src/icons/upload.svg diff --git a/packages/clerk-js/src/ui/icons/user.svg b/packages/ui/src/icons/user.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/user.svg rename to packages/ui/src/icons/user.svg diff --git a/packages/clerk-js/src/ui/icons/userAdd.svg b/packages/ui/src/icons/userAdd.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/userAdd.svg rename to packages/ui/src/icons/userAdd.svg diff --git a/packages/clerk-js/src/ui/icons/users.svg b/packages/ui/src/icons/users.svg similarity index 100% rename from packages/clerk-js/src/ui/icons/users.svg rename to packages/ui/src/icons/users.svg diff --git a/packages/ui/src/index.browser.ts b/packages/ui/src/index.browser.ts new file mode 100644 index 00000000000..41bae854b4e --- /dev/null +++ b/packages/ui/src/index.browser.ts @@ -0,0 +1,37 @@ +import './utils/setWebpackChunkPublicPath'; + +console.log('is it gonna run now?'); + +window.__unstable_ClerkUi = { + hello: true, +}; + +// TODO: @nikos move this to shared utils +// It's crucial this is the first import, +// otherwise chunk loading will not work +// import './utils/setWebpackChunkPublicPath'; + +// /** +// * Browser bundle entry point for @clerk/ui +// * +// * This file is built with rspack and exposes the UI components +// * to the global window object for consumption by clerk-js and other packages. +// */ +import { mountComponentRenderer } from './Components1'; +console.log('nikos mountComponentRenderer', mountComponentRenderer); + +// // Expose to window for external consumption +// console.log('nikos will inect'); + +// if (!window.__unstable_ClerkUi) { +// window.__unstable_ClerkUi = { +// mountComponentRenderer, +// version: PACKAGE_VERSION, +// }; +// console.log('nikos clerkui injected ', window.__unstable_ClerkUi); +// } + +// // Hot module replacement for development +// if (module.hot) { +// module.hot.accept(); +// } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 00000000000..83cc4b5757c --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1 @@ +export const uiVersion = {} as any; diff --git a/packages/ui/src/internal.ts b/packages/ui/src/internal.ts new file mode 100644 index 00000000000..f7b660df234 --- /dev/null +++ b/packages/ui/src/internal.ts @@ -0,0 +1 @@ +export { type ComponentControls, type MountComponentRenderer, mountComponentRenderer } from './Components'; diff --git a/packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx b/packages/ui/src/lazyModules/MountedCheckoutDrawer.tsx similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx rename to packages/ui/src/lazyModules/MountedCheckoutDrawer.tsx diff --git a/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx b/packages/ui/src/lazyModules/MountedPlanDetailDrawer.tsx similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx rename to packages/ui/src/lazyModules/MountedPlanDetailDrawer.tsx diff --git a/packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx b/packages/ui/src/lazyModules/MountedSubscriptionDetailDrawer.tsx similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx rename to packages/ui/src/lazyModules/MountedSubscriptionDetailDrawer.tsx diff --git a/packages/clerk-js/src/ui/lazyModules/common.ts b/packages/ui/src/lazyModules/common.ts similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/common.ts rename to packages/ui/src/lazyModules/common.ts diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/ui/src/lazyModules/components.ts similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/components.ts rename to packages/ui/src/lazyModules/components.ts diff --git a/packages/clerk-js/src/ui/lazyModules/drawers.tsx b/packages/ui/src/lazyModules/drawers.tsx similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/drawers.tsx rename to packages/ui/src/lazyModules/drawers.tsx diff --git a/packages/clerk-js/src/ui/lazyModules/providers.tsx b/packages/ui/src/lazyModules/providers.tsx similarity index 100% rename from packages/clerk-js/src/ui/lazyModules/providers.tsx rename to packages/ui/src/lazyModules/providers.tsx diff --git a/packages/clerk-js/src/ui/localization/__tests__/applyTokensToString.test.ts b/packages/ui/src/localization/__tests__/applyTokensToString.test.ts similarity index 100% rename from packages/clerk-js/src/ui/localization/__tests__/applyTokensToString.test.ts rename to packages/ui/src/localization/__tests__/applyTokensToString.test.ts diff --git a/packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx b/packages/ui/src/localization/__tests__/makeLocalizable.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx rename to packages/ui/src/localization/__tests__/makeLocalizable.test.tsx diff --git a/packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx b/packages/ui/src/localization/__tests__/parseLocalization.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx rename to packages/ui/src/localization/__tests__/parseLocalization.test.tsx diff --git a/packages/clerk-js/src/ui/localization/applyTokensToString.ts b/packages/ui/src/localization/applyTokensToString.ts similarity index 99% rename from packages/clerk-js/src/ui/localization/applyTokensToString.ts rename to packages/ui/src/localization/applyTokensToString.ts index d11b817d4f2..031a79d3865 100644 --- a/packages/clerk-js/src/ui/localization/applyTokensToString.ts +++ b/packages/ui/src/localization/applyTokensToString.ts @@ -73,7 +73,7 @@ const applyTokenExpressions = (s: string, expressions: TokenExpression[], tokens const value = modifiers.reduce((acc, mod) => { try { return MODIFIERS[mod.modifierName](acc, ...mod.params); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } diff --git a/packages/ui/src/localization/defaultEnglishResource.ts b/packages/ui/src/localization/defaultEnglishResource.ts new file mode 100644 index 00000000000..5d8fb393220 --- /dev/null +++ b/packages/ui/src/localization/defaultEnglishResource.ts @@ -0,0 +1,3 @@ +import { enUS } from '@clerk/localizations'; + +export const defaultResource = enUS; diff --git a/packages/clerk-js/src/ui/localization/index.ts b/packages/ui/src/localization/index.ts similarity index 100% rename from packages/clerk-js/src/ui/localization/index.ts rename to packages/ui/src/localization/index.ts diff --git a/packages/clerk-js/src/ui/localization/localizationKeys.ts b/packages/ui/src/localization/localizationKeys.ts similarity index 100% rename from packages/clerk-js/src/ui/localization/localizationKeys.ts rename to packages/ui/src/localization/localizationKeys.ts diff --git a/packages/clerk-js/src/ui/localization/localizationModifiers.ts b/packages/ui/src/localization/localizationModifiers.ts similarity index 94% rename from packages/clerk-js/src/ui/localization/localizationModifiers.ts rename to packages/ui/src/localization/localizationModifiers.ts index 4c2575d92a0..8913087040b 100644 --- a/packages/clerk-js/src/ui/localization/localizationModifiers.ts +++ b/packages/ui/src/localization/localizationModifiers.ts @@ -4,7 +4,7 @@ import { titleize } from '@clerk/shared/underscore'; const timeString = (val: Date | string | number, locale?: string) => { try { return new Intl.DateTimeFormat(locale || 'en-US', { timeStyle: 'short' }).format(normalizeDate(val)); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } @@ -13,7 +13,7 @@ const timeString = (val: Date | string | number, locale?: string) => { const weekday = (val: Date | string | number, locale?: string, weekday?: 'long' | 'short' | 'narrow' | undefined) => { try { return new Intl.DateTimeFormat(locale || 'en-US', { weekday: weekday || 'long' }).format(normalizeDate(val)); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } @@ -31,7 +31,7 @@ const shortDate = (val: Date | string | number, locale?: string) => { day: 'numeric', ...(date.getFullYear() !== new Date().getFullYear() ? { year: 'numeric' } : {}), }).format(normalizeDate(val)); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } @@ -47,7 +47,7 @@ const longDate = (val: Date | string | number, locale?: string) => { day: 'numeric', year: 'numeric', }).format(normalizeDate(val)); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } @@ -56,7 +56,7 @@ const longDate = (val: Date | string | number, locale?: string) => { const numeric = (val: Date | number | string, locale?: string) => { try { return new Intl.DateTimeFormat(locale || 'en-US').format(normalizeDate(val)); - } catch (e) { + } catch (e: any) { console.warn(e); return ''; } diff --git a/packages/clerk-js/src/ui/localization/makeLocalizable.tsx b/packages/ui/src/localization/makeLocalizable.tsx similarity index 97% rename from packages/clerk-js/src/ui/localization/makeLocalizable.tsx rename to packages/ui/src/localization/makeLocalizable.tsx index d3dd4506905..f259e490e8f 100644 --- a/packages/clerk-js/src/ui/localization/makeLocalizable.tsx +++ b/packages/ui/src/localization/makeLocalizable.tsx @@ -103,7 +103,7 @@ export const useLocalizations = () => { ); }; - return { t, translateError, locale: localization?.locale || defaultResource?.locale }; + return { t, translateError, locale: localization?.locale || (defaultResource.locale as string) }; }; const localizationKeyAttribute = (localizationKey: LocalizationKey) => { diff --git a/packages/clerk-js/src/ui/localization/parseLocalization.ts b/packages/ui/src/localization/parseLocalization.ts similarity index 100% rename from packages/clerk-js/src/ui/localization/parseLocalization.ts rename to packages/ui/src/localization/parseLocalization.ts diff --git a/packages/clerk-js/src/ui/portal/index.tsx b/packages/ui/src/portal/index.tsx similarity index 91% rename from packages/clerk-js/src/ui/portal/index.tsx rename to packages/ui/src/portal/index.tsx index cf64c1155ba..ab0958c08ce 100644 --- a/packages/clerk-js/src/ui/portal/index.tsx +++ b/packages/ui/src/portal/index.tsx @@ -1,13 +1,13 @@ +import { PRESERVED_QUERYSTRING_PARAMS } from '@clerk/shared/internal/clerk-js/constants'; +import { clerkErrorPathRouterMissingPath } from '@clerk/shared/internal/clerk-js/errors'; import type { RoutingOptions } from '@clerk/shared/types'; import React, { Suspense } from 'react'; import ReactDOM from 'react-dom'; -import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants'; -import { clerkErrorPathRouterMissingPath } from '../../core/errors'; -import { normalizeRoutingOptions } from '../../utils/normalizeRoutingOptions'; import { ComponentContextProvider } from '../contexts'; import { HashRouter, PathRouter, VirtualRouter } from '../router'; import type { AvailableComponentCtx, AvailableComponentName } from '../types'; +import { normalizeRoutingOptions } from '../utils/normalizeRoutingOptions'; type PortalProps> = { node: HTMLDivElement; diff --git a/packages/clerk-js/src/ui/primitives/Alert.tsx b/packages/ui/src/primitives/Alert.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Alert.tsx rename to packages/ui/src/primitives/Alert.tsx diff --git a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx b/packages/ui/src/primitives/AlertIcon.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/AlertIcon.tsx rename to packages/ui/src/primitives/AlertIcon.tsx diff --git a/packages/clerk-js/src/ui/primitives/Badge.tsx b/packages/ui/src/primitives/Badge.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Badge.tsx rename to packages/ui/src/primitives/Badge.tsx diff --git a/packages/clerk-js/src/ui/primitives/Box.tsx b/packages/ui/src/primitives/Box.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Box.tsx rename to packages/ui/src/primitives/Box.tsx diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/ui/src/primitives/Button.tsx similarity index 99% rename from packages/clerk-js/src/ui/primitives/Button.tsx rename to packages/ui/src/primitives/Button.tsx index 4db84359740..97e7e8a8923 100644 --- a/packages/clerk-js/src/ui/primitives/Button.tsx +++ b/packages/ui/src/primitives/Button.tsx @@ -219,9 +219,9 @@ const Button = React.forwardRef((props, ref) => type={undefined} onClick={onClick} disabled={isDisabled} - css={applyVariants(parsedProps) as any} data-variant={props.variant || 'solid'} data-color={props.colorScheme || 'primary'} + css={applyVariants(parsedProps)} ref={ref} > {isLoading && ( @@ -268,7 +268,7 @@ const SimpleButton = React.forwardRef((props, re // the default styles of our components type={undefined} onClick={onClick} - css={applyVariants(parsedProps) as any} + css={applyVariants(parsedProps)} disabled={isDisabled} data-variant={props.variant || 'solid'} data-color={props.colorScheme || 'primary'} diff --git a/packages/clerk-js/src/ui/primitives/Dd.tsx b/packages/ui/src/primitives/Dd.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Dd.tsx rename to packages/ui/src/primitives/Dd.tsx diff --git a/packages/clerk-js/src/ui/primitives/Dl.tsx b/packages/ui/src/primitives/Dl.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Dl.tsx rename to packages/ui/src/primitives/Dl.tsx diff --git a/packages/clerk-js/src/ui/primitives/Dt.tsx b/packages/ui/src/primitives/Dt.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Dt.tsx rename to packages/ui/src/primitives/Dt.tsx diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/ui/src/primitives/Flex.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Flex.tsx rename to packages/ui/src/primitives/Flex.tsx diff --git a/packages/clerk-js/src/ui/primitives/Form.tsx b/packages/ui/src/primitives/Form.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Form.tsx rename to packages/ui/src/primitives/Form.tsx diff --git a/packages/clerk-js/src/ui/primitives/FormErrorText.tsx b/packages/ui/src/primitives/FormErrorText.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/FormErrorText.tsx rename to packages/ui/src/primitives/FormErrorText.tsx diff --git a/packages/clerk-js/src/ui/primitives/FormInfoText.tsx b/packages/ui/src/primitives/FormInfoText.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/FormInfoText.tsx rename to packages/ui/src/primitives/FormInfoText.tsx diff --git a/packages/clerk-js/src/ui/primitives/FormLabel.tsx b/packages/ui/src/primitives/FormLabel.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/FormLabel.tsx rename to packages/ui/src/primitives/FormLabel.tsx diff --git a/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx b/packages/ui/src/primitives/FormSuccessText.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/FormSuccessText.tsx rename to packages/ui/src/primitives/FormSuccessText.tsx diff --git a/packages/clerk-js/src/ui/primitives/FormWarningText.tsx b/packages/ui/src/primitives/FormWarningText.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/FormWarningText.tsx rename to packages/ui/src/primitives/FormWarningText.tsx diff --git a/packages/clerk-js/src/ui/primitives/Grid.tsx b/packages/ui/src/primitives/Grid.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Grid.tsx rename to packages/ui/src/primitives/Grid.tsx diff --git a/packages/clerk-js/src/ui/primitives/Heading.tsx b/packages/ui/src/primitives/Heading.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Heading.tsx rename to packages/ui/src/primitives/Heading.tsx diff --git a/packages/clerk-js/src/ui/primitives/Hr.tsx b/packages/ui/src/primitives/Hr.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Hr.tsx rename to packages/ui/src/primitives/Hr.tsx diff --git a/packages/clerk-js/src/ui/primitives/Icon.tsx b/packages/ui/src/primitives/Icon.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Icon.tsx rename to packages/ui/src/primitives/Icon.tsx diff --git a/packages/clerk-js/src/ui/primitives/Image.tsx b/packages/ui/src/primitives/Image.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Image.tsx rename to packages/ui/src/primitives/Image.tsx diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/ui/src/primitives/Input.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Input.tsx rename to packages/ui/src/primitives/Input.tsx diff --git a/packages/clerk-js/src/ui/primitives/Link.tsx b/packages/ui/src/primitives/Link.tsx similarity index 97% rename from packages/clerk-js/src/ui/primitives/Link.tsx rename to packages/ui/src/primitives/Link.tsx index c724e659779..0709cb54e2b 100644 --- a/packages/clerk-js/src/ui/primitives/Link.tsx +++ b/packages/ui/src/primitives/Link.tsx @@ -1,6 +1,6 @@ +import { sanitizeHref } from '@clerk/shared/internal/clerk-js/url'; import React from 'react'; -import { sanitizeHref } from '../../utils/url'; import type { PrimitiveProps, StyleVariants } from '../styledSystem'; import { common, createVariants } from '../styledSystem'; import { applyDataStateProps } from './applyDataStateProps'; diff --git a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx b/packages/ui/src/primitives/NotificationBadge.tsx similarity index 98% rename from packages/clerk-js/src/ui/primitives/NotificationBadge.tsx rename to packages/ui/src/primitives/NotificationBadge.tsx index 0a26006424a..f0ff913f8bc 100644 --- a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx +++ b/packages/ui/src/primitives/NotificationBadge.tsx @@ -38,7 +38,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({ }, })); -// @ts-ignore +// @ts-ignore noop export type NotificationBadgeProps = PropsOfComponent & StyleVariants; export const NotificationBadge = (props: NotificationBadgeProps) => { diff --git a/packages/clerk-js/src/ui/primitives/Span.tsx b/packages/ui/src/primitives/Span.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Span.tsx rename to packages/ui/src/primitives/Span.tsx diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/ui/src/primitives/Spinner.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Spinner.tsx rename to packages/ui/src/primitives/Spinner.tsx diff --git a/packages/clerk-js/src/ui/primitives/Table.tsx b/packages/ui/src/primitives/Table.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Table.tsx rename to packages/ui/src/primitives/Table.tsx diff --git a/packages/clerk-js/src/ui/primitives/Tbody.tsx b/packages/ui/src/primitives/Tbody.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Tbody.tsx rename to packages/ui/src/primitives/Tbody.tsx diff --git a/packages/clerk-js/src/ui/primitives/Td.tsx b/packages/ui/src/primitives/Td.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Td.tsx rename to packages/ui/src/primitives/Td.tsx diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/ui/src/primitives/Text.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Text.tsx rename to packages/ui/src/primitives/Text.tsx diff --git a/packages/clerk-js/src/ui/primitives/Th.tsx b/packages/ui/src/primitives/Th.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Th.tsx rename to packages/ui/src/primitives/Th.tsx diff --git a/packages/clerk-js/src/ui/primitives/Thead.tsx b/packages/ui/src/primitives/Thead.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Thead.tsx rename to packages/ui/src/primitives/Thead.tsx diff --git a/packages/clerk-js/src/ui/primitives/Tr.tsx b/packages/ui/src/primitives/Tr.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/Tr.tsx rename to packages/ui/src/primitives/Tr.tsx diff --git a/packages/clerk-js/src/ui/primitives/applyDataStateProps.ts b/packages/ui/src/primitives/applyDataStateProps.ts similarity index 100% rename from packages/clerk-js/src/ui/primitives/applyDataStateProps.ts rename to packages/ui/src/primitives/applyDataStateProps.ts diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/ui/src/primitives/gapPropertyCompat.ts similarity index 100% rename from packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts rename to packages/ui/src/primitives/gapPropertyCompat.ts diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormField.tsx b/packages/ui/src/primitives/hooks/useFormField.tsx similarity index 100% rename from packages/clerk-js/src/ui/primitives/hooks/useFormField.tsx rename to packages/ui/src/primitives/hooks/useFormField.tsx diff --git a/packages/clerk-js/src/ui/primitives/hooks/useInput.ts b/packages/ui/src/primitives/hooks/useInput.ts similarity index 100% rename from packages/clerk-js/src/ui/primitives/hooks/useInput.ts rename to packages/ui/src/primitives/hooks/useInput.ts diff --git a/packages/clerk-js/src/ui/primitives/index.ts b/packages/ui/src/primitives/index.ts similarity index 100% rename from packages/clerk-js/src/ui/primitives/index.ts rename to packages/ui/src/primitives/index.ts diff --git a/packages/clerk-js/src/ui/router/BaseRouter.tsx b/packages/ui/src/router/BaseRouter.tsx similarity index 96% rename from packages/clerk-js/src/ui/router/BaseRouter.tsx rename to packages/ui/src/router/BaseRouter.tsx index 734fc138937..a83e384cb34 100644 --- a/packages/clerk-js/src/ui/router/BaseRouter.tsx +++ b/packages/ui/src/router/BaseRouter.tsx @@ -1,8 +1,9 @@ +import { getQueryParams, stringifyQueryParams } from '@clerk/shared/internal/clerk-js/querystring'; +import { trimTrailingSlash } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import type { NavigateOptions } from '@clerk/shared/types'; import React from 'react'; -import { getQueryParams, stringifyQueryParams, trimTrailingSlash } from '../../utils'; import { useWindowEventListener } from '../hooks'; import { newPaths } from './newPaths'; import { match } from './pathToRegexp'; diff --git a/packages/clerk-js/src/ui/router/HashRouter.tsx b/packages/ui/src/router/HashRouter.tsx similarity index 94% rename from packages/clerk-js/src/ui/router/HashRouter.tsx rename to packages/ui/src/router/HashRouter.tsx index 0e44a73f39e..7cb7e4decfb 100644 --- a/packages/clerk-js/src/ui/router/HashRouter.tsx +++ b/packages/ui/src/router/HashRouter.tsx @@ -1,6 +1,6 @@ +import { hasUrlInFragment, stripOrigin } from '@clerk/shared/internal/clerk-js/url'; import React from 'react'; -import { hasUrlInFragment, stripOrigin } from '../../utils'; import { BaseRouter } from './BaseRouter'; export const hashRouterBase = 'CLERK-ROUTER/HASH'; diff --git a/packages/clerk-js/src/ui/router/PathRouter.tsx b/packages/ui/src/router/PathRouter.tsx similarity index 97% rename from packages/clerk-js/src/ui/router/PathRouter.tsx rename to packages/ui/src/router/PathRouter.tsx index c34f5a404b0..e5662a22e7d 100644 --- a/packages/clerk-js/src/ui/router/PathRouter.tsx +++ b/packages/ui/src/router/PathRouter.tsx @@ -1,8 +1,8 @@ +import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import type { NavigateOptions } from '@clerk/shared/types'; import React from 'react'; -import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils'; import { BaseRouter } from './BaseRouter'; interface PathRouterProps { diff --git a/packages/clerk-js/src/ui/router/Route.tsx b/packages/ui/src/router/Route.tsx similarity index 97% rename from packages/clerk-js/src/ui/router/Route.tsx rename to packages/ui/src/router/Route.tsx index c2d7ea16f2f..d331ad0ecf2 100644 --- a/packages/clerk-js/src/ui/router/Route.tsx +++ b/packages/ui/src/router/Route.tsx @@ -1,8 +1,8 @@ +import { pathFromFullPath, trimTrailingSlash } from '@clerk/shared/internal/clerk-js/url'; import { useClerk } from '@clerk/shared/react'; import type { LoadedClerk } from '@clerk/shared/types'; import React from 'react'; -import { pathFromFullPath, trimTrailingSlash } from '../../utils'; import { useNavigateToFlowStart } from '../hooks'; import { newPaths } from './newPaths'; import { match } from './pathToRegexp'; diff --git a/packages/clerk-js/src/ui/router/RouteContext.tsx b/packages/ui/src/router/RouteContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/RouteContext.tsx rename to packages/ui/src/router/RouteContext.tsx diff --git a/packages/clerk-js/src/ui/router/Switch.tsx b/packages/ui/src/router/Switch.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/Switch.tsx rename to packages/ui/src/router/Switch.tsx diff --git a/packages/clerk-js/src/ui/router/VirtualRouter.tsx b/packages/ui/src/router/VirtualRouter.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/VirtualRouter.tsx rename to packages/ui/src/router/VirtualRouter.tsx diff --git a/packages/clerk-js/src/ui/router/__mocks__/RouteContext.tsx b/packages/ui/src/router/__mocks__/RouteContext.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/__mocks__/RouteContext.tsx rename to packages/ui/src/router/__mocks__/RouteContext.tsx diff --git a/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx b/packages/ui/src/router/__tests__/HashRouter.test.tsx similarity index 98% rename from packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx rename to packages/ui/src/router/__tests__/HashRouter.test.tsx index 4fab74225c7..ab6ee1c17a8 100644 --- a/packages/clerk-js/src/ui/router/__tests__/HashRouter.test.tsx +++ b/packages/ui/src/router/__tests__/HashRouter.test.tsx @@ -1,9 +1,9 @@ +import type { Clerk } from '@clerk/shared/types'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'; -import type { Clerk } from '../../../core/clerk'; import { HashRouter, Route, useRouter } from '..'; const mockNavigate = vi.fn(); diff --git a/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx b/packages/ui/src/router/__tests__/PathRouter.test.tsx similarity index 98% rename from packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx rename to packages/ui/src/router/__tests__/PathRouter.test.tsx index 90ab5eae5d6..5803c23d325 100644 --- a/packages/clerk-js/src/ui/router/__tests__/PathRouter.test.tsx +++ b/packages/ui/src/router/__tests__/PathRouter.test.tsx @@ -1,9 +1,9 @@ +import type { Clerk } from '@clerk/shared/types'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'; -import type { Clerk } from '../../../core/clerk'; import { PathRouter, Route, useRouter } from '..'; const mockNavigate = vi.fn(); diff --git a/packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx b/packages/ui/src/router/__tests__/Switch.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/__tests__/Switch.test.tsx rename to packages/ui/src/router/__tests__/Switch.test.tsx diff --git a/packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx b/packages/ui/src/router/__tests__/VirtualRouter.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/__tests__/VirtualRouter.test.tsx rename to packages/ui/src/router/__tests__/VirtualRouter.test.tsx diff --git a/packages/clerk-js/src/ui/router/index.tsx b/packages/ui/src/router/index.tsx similarity index 100% rename from packages/clerk-js/src/ui/router/index.tsx rename to packages/ui/src/router/index.tsx diff --git a/packages/clerk-js/src/ui/router/newPaths.ts b/packages/ui/src/router/newPaths.ts similarity index 100% rename from packages/clerk-js/src/ui/router/newPaths.ts rename to packages/ui/src/router/newPaths.ts diff --git a/packages/clerk-js/src/ui/router/pathToRegexp.ts b/packages/ui/src/router/pathToRegexp.ts similarity index 100% rename from packages/clerk-js/src/ui/router/pathToRegexp.ts rename to packages/ui/src/router/pathToRegexp.ts diff --git a/packages/clerk-js/src/ui/styledSystem/InternalThemeProvider.tsx b/packages/ui/src/styledSystem/InternalThemeProvider.tsx similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/InternalThemeProvider.tsx rename to packages/ui/src/styledSystem/InternalThemeProvider.tsx diff --git a/packages/clerk-js/src/ui/styledSystem/StyleCacheProvider.tsx b/packages/ui/src/styledSystem/StyleCacheProvider.tsx similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/StyleCacheProvider.tsx rename to packages/ui/src/styledSystem/StyleCacheProvider.tsx diff --git a/packages/clerk-js/src/ui/styledSystem/__tests__/createVariants.test.ts b/packages/ui/src/styledSystem/__tests__/createVariants.test.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/__tests__/createVariants.test.ts rename to packages/ui/src/styledSystem/__tests__/createVariants.test.ts diff --git a/packages/clerk-js/src/ui/styledSystem/animations.ts b/packages/ui/src/styledSystem/animations.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/animations.ts rename to packages/ui/src/styledSystem/animations.ts diff --git a/packages/clerk-js/src/ui/styledSystem/breakpoints.tsx b/packages/ui/src/styledSystem/breakpoints.tsx similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/breakpoints.tsx rename to packages/ui/src/styledSystem/breakpoints.tsx diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/ui/src/styledSystem/common.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/common.ts rename to packages/ui/src/styledSystem/common.ts diff --git a/packages/clerk-js/src/ui/styledSystem/createCssVariables.ts b/packages/ui/src/styledSystem/createCssVariables.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/createCssVariables.ts rename to packages/ui/src/styledSystem/createCssVariables.ts diff --git a/packages/clerk-js/src/ui/styledSystem/createVariants.ts b/packages/ui/src/styledSystem/createVariants.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/createVariants.ts rename to packages/ui/src/styledSystem/createVariants.ts diff --git a/packages/clerk-js/src/ui/styledSystem/index.ts b/packages/ui/src/styledSystem/index.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/index.ts rename to packages/ui/src/styledSystem/index.ts diff --git a/packages/clerk-js/src/ui/styledSystem/types.ts b/packages/ui/src/styledSystem/types.ts similarity index 100% rename from packages/clerk-js/src/ui/styledSystem/types.ts rename to packages/ui/src/styledSystem/types.ts diff --git a/packages/clerk-js/src/ui/types.ts b/packages/ui/src/types.ts similarity index 100% rename from packages/clerk-js/src/ui/types.ts rename to packages/ui/src/types.ts diff --git a/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx b/packages/ui/src/utils/ExternalElementMounter.tsx similarity index 100% rename from packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx rename to packages/ui/src/utils/ExternalElementMounter.tsx diff --git a/packages/clerk-js/src/ui/utils/__tests__/createCustomMenuItems.test.ts b/packages/ui/src/utils/__tests__/createCustomMenuItems.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/createCustomMenuItems.test.ts rename to packages/ui/src/utils/__tests__/createCustomMenuItems.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/createCustomPages.test.ts b/packages/ui/src/utils/__tests__/createCustomPages.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/createCustomPages.test.ts rename to packages/ui/src/utils/__tests__/createCustomPages.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts b/packages/ui/src/utils/__tests__/cssSupports.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/cssSupports.test.ts rename to packages/ui/src/utils/__tests__/cssSupports.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/cssVariables.test.ts b/packages/ui/src/utils/__tests__/cssVariables.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/cssVariables.test.ts rename to packages/ui/src/utils/__tests__/cssVariables.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/dynamicParamParser.test.ts b/packages/ui/src/utils/__tests__/dynamicParamParser.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/dynamicParamParser.test.ts rename to packages/ui/src/utils/__tests__/dynamicParamParser.test.ts diff --git a/packages/clerk-js/src/utils/__tests__/appearance.test.ts b/packages/ui/src/utils/__tests__/extractCssLayerNameFromAppearance.ts similarity index 87% rename from packages/clerk-js/src/utils/__tests__/appearance.test.ts rename to packages/ui/src/utils/__tests__/extractCssLayerNameFromAppearance.ts index a79e1f9ab36..bf77a612f38 100644 --- a/packages/clerk-js/src/utils/__tests__/appearance.test.ts +++ b/packages/ui/src/utils/__tests__/extractCssLayerNameFromAppearance.ts @@ -1,9 +1,9 @@ import type { Appearance, BaseTheme } from '@clerk/shared/types'; import { describe, expect, it } from 'vitest'; -import { processCssLayerNameExtraction } from '../appearance'; +import { extractCssLayerNameFromAppearance } from '../extractCssLayerNameFromAppearance'; -describe('processCssLayerNameExtraction', () => { +describe('extractCssLayerNameFromAppearance', () => { it('extracts cssLayerName from single baseTheme and moves it to appearance level', () => { const appearance: Appearance = { baseTheme: { @@ -12,12 +12,13 @@ describe('processCssLayerNameExtraction', () => { }, }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('theme-layer'); expect(result?.baseTheme).toBeDefined(); if (result?.baseTheme && !Array.isArray(result.baseTheme)) { expect((result.baseTheme as BaseTheme & { cssLayerName?: string }).cssLayerName).toBeUndefined(); + // @ts-expect-error __type is a hidden prop expect(result.baseTheme.__type).toBe('prebuilt_appearance'); } }); @@ -31,7 +32,7 @@ describe('processCssLayerNameExtraction', () => { }, }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('appearance-layer'); if (result?.baseTheme && !Array.isArray(result.baseTheme)) { @@ -56,7 +57,7 @@ describe('processCssLayerNameExtraction', () => { ], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('first-layer'); expect(result?.baseTheme).toBeDefined(); @@ -86,7 +87,7 @@ describe('processCssLayerNameExtraction', () => { ], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('appearance-layer'); if (result?.baseTheme && Array.isArray(result.baseTheme)) { @@ -103,10 +104,11 @@ describe('processCssLayerNameExtraction', () => { }, }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBeUndefined(); if (result?.baseTheme && !Array.isArray(result.baseTheme)) { + // @ts-expect-error __type is a hidden prop expect(result.baseTheme.__type).toBe('prebuilt_appearance'); expect((result.baseTheme as BaseTheme & { cssLayerName?: string }).cssLayerName).toBeUndefined(); } @@ -124,7 +126,7 @@ describe('processCssLayerNameExtraction', () => { ], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBeUndefined(); if (result?.baseTheme && Array.isArray(result.baseTheme)) { @@ -141,14 +143,14 @@ describe('processCssLayerNameExtraction', () => { cssLayerName: 'standalone-layer', }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('standalone-layer'); expect(result?.baseTheme).toBeUndefined(); }); it('handles undefined appearance', () => { - const result = processCssLayerNameExtraction(undefined); + const result = extractCssLayerNameFromAppearance(undefined); expect(result).toBeUndefined(); }); @@ -162,7 +164,7 @@ describe('processCssLayerNameExtraction', () => { }, }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('theme-layer'); expect(result?.variables?.colorPrimary).toBe('blue'); @@ -176,7 +178,7 @@ describe('processCssLayerNameExtraction', () => { baseTheme: [], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBeUndefined(); expect(result?.baseTheme).toEqual([]); @@ -201,7 +203,7 @@ describe('processCssLayerNameExtraction', () => { ], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('second-theme-layer'); expect(Array.isArray(result?.baseTheme)).toBe(true); @@ -229,7 +231,7 @@ describe('processCssLayerNameExtraction', () => { ], }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBe('appearance-level-layer'); expect(Array.isArray(result?.baseTheme)).toBe(true); @@ -250,7 +252,7 @@ describe('processCssLayerNameExtraction', () => { }, }; - const result = processCssLayerNameExtraction(appearance); + const result = extractCssLayerNameFromAppearance(appearance); expect(result?.cssLayerName).toBeUndefined(); expect(result?.baseTheme).toEqual({ diff --git a/packages/clerk-js/src/ui/utils/__tests__/factorSorting.test.ts b/packages/ui/src/utils/__tests__/factorSorting.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/factorSorting.test.ts rename to packages/ui/src/utils/__tests__/factorSorting.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/formatSafeIdentifier.test.ts b/packages/ui/src/utils/__tests__/formatSafeIdentifier.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/formatSafeIdentifier.test.ts rename to packages/ui/src/utils/__tests__/formatSafeIdentifier.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/intl.test.ts b/packages/ui/src/utils/__tests__/intl.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/intl.test.ts rename to packages/ui/src/utils/__tests__/intl.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/originPrefersPopup.test.ts b/packages/ui/src/utils/__tests__/originPrefersPopup.test.ts similarity index 98% rename from packages/clerk-js/src/ui/utils/__tests__/originPrefersPopup.test.ts rename to packages/ui/src/utils/__tests__/originPrefersPopup.test.ts index fccf944cb3c..c80f250a245 100644 --- a/packages/clerk-js/src/ui/utils/__tests__/originPrefersPopup.test.ts +++ b/packages/ui/src/utils/__tests__/originPrefersPopup.test.ts @@ -3,12 +3,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import { originPrefersPopup } from '../originPrefersPopup'; // Mock the inIframe function -vi.mock('@/utils', () => ({ +vi.mock('@clerk/shared/internal/clerk-js/runtime', () => ({ inIframe: vi.fn(), })); // Import the mocked function -import { inIframe } from '@/utils'; +import { inIframe } from '@clerk/shared/internal/clerk-js/runtime'; const mockInIframe = vi.mocked(inIframe); describe('originPrefersPopup', () => { diff --git a/packages/clerk-js/src/ui/utils/__tests__/passwordUtils.test.tsx b/packages/ui/src/utils/__tests__/passwordUtils.test.tsx similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/passwordUtils.test.tsx rename to packages/ui/src/utils/__tests__/passwordUtils.test.tsx diff --git a/packages/clerk-js/src/ui/utils/__tests__/phoneUtils.test.ts b/packages/ui/src/utils/__tests__/phoneUtils.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/phoneUtils.test.ts rename to packages/ui/src/utils/__tests__/phoneUtils.test.ts diff --git a/packages/clerk-js/src/ui/utils/__tests__/truncateTextWithEndVisible.test.ts b/packages/ui/src/utils/__tests__/truncateTextWithEndVisible.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/__tests__/truncateTextWithEndVisible.test.ts rename to packages/ui/src/utils/__tests__/truncateTextWithEndVisible.test.ts diff --git a/packages/ui/src/utils/buildVirtualRouterUrl.ts b/packages/ui/src/utils/buildVirtualRouterUrl.ts new file mode 100644 index 00000000000..102d1a7eb4a --- /dev/null +++ b/packages/ui/src/utils/buildVirtualRouterUrl.ts @@ -0,0 +1,7 @@ +export const buildVirtualRouterUrl = ({ base, path }: { base: string; path: string | undefined }) => { + if (!path) { + return base; + } + + return base + path; +}; diff --git a/packages/ui/src/utils/captcha/constants.ts b/packages/ui/src/utils/captcha/constants.ts new file mode 100644 index 00000000000..cca89be0467 --- /dev/null +++ b/packages/ui/src/utils/captcha/constants.ts @@ -0,0 +1 @@ +export const CAPTCHA_ELEMENT_ID = 'clerk-captcha'; diff --git a/packages/clerk-js/src/ui/utils/colors/README.md b/packages/ui/src/utils/colors/README.md similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/README.md rename to packages/ui/src/utils/colors/README.md diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/constants.test.ts b/packages/ui/src/utils/colors/__tests__/constants.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/constants.test.ts rename to packages/ui/src/utils/colors/__tests__/constants.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/index.test.ts b/packages/ui/src/utils/colors/__tests__/index.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/index.test.ts rename to packages/ui/src/utils/colors/__tests__/index.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/legacy.test.ts b/packages/ui/src/utils/colors/__tests__/legacy.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/legacy.test.ts rename to packages/ui/src/utils/colors/__tests__/legacy.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/modern.test.ts b/packages/ui/src/utils/colors/__tests__/modern.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/modern.test.ts rename to packages/ui/src/utils/colors/__tests__/modern.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/scales.test.ts b/packages/ui/src/utils/colors/__tests__/scales.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/scales.test.ts rename to packages/ui/src/utils/colors/__tests__/scales.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/utils.test.ts b/packages/ui/src/utils/colors/__tests__/utils.test.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/__tests__/utils.test.ts rename to packages/ui/src/utils/colors/__tests__/utils.test.ts diff --git a/packages/clerk-js/src/ui/utils/colors/constants.ts b/packages/ui/src/utils/colors/constants.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/constants.ts rename to packages/ui/src/utils/colors/constants.ts diff --git a/packages/clerk-js/src/ui/utils/colors/index.ts b/packages/ui/src/utils/colors/index.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/index.ts rename to packages/ui/src/utils/colors/index.ts diff --git a/packages/clerk-js/src/ui/utils/colors/legacy.ts b/packages/ui/src/utils/colors/legacy.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/legacy.ts rename to packages/ui/src/utils/colors/legacy.ts diff --git a/packages/clerk-js/src/ui/utils/colors/modern.ts b/packages/ui/src/utils/colors/modern.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/modern.ts rename to packages/ui/src/utils/colors/modern.ts diff --git a/packages/clerk-js/src/ui/utils/colors/scales.ts b/packages/ui/src/utils/colors/scales.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/scales.ts rename to packages/ui/src/utils/colors/scales.ts diff --git a/packages/clerk-js/src/ui/utils/colors/utils.ts b/packages/ui/src/utils/colors/utils.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/colors/utils.ts rename to packages/ui/src/utils/colors/utils.ts diff --git a/packages/clerk-js/src/ui/utils/containsAllOf.ts b/packages/ui/src/utils/containsAllOf.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/containsAllOf.ts rename to packages/ui/src/utils/containsAllOf.ts diff --git a/packages/clerk-js/src/ui/utils/createCustomMenuItems.tsx b/packages/ui/src/utils/createCustomMenuItems.tsx similarity index 100% rename from packages/clerk-js/src/ui/utils/createCustomMenuItems.tsx rename to packages/ui/src/utils/createCustomMenuItems.tsx diff --git a/packages/clerk-js/src/ui/utils/createCustomPages.tsx b/packages/ui/src/utils/createCustomPages.tsx similarity index 98% rename from packages/clerk-js/src/ui/utils/createCustomPages.tsx rename to packages/ui/src/utils/createCustomPages.tsx index edb3c58f558..0d9ca551a7a 100644 --- a/packages/clerk-js/src/ui/utils/createCustomPages.tsx +++ b/packages/ui/src/utils/createCustomPages.tsx @@ -1,12 +1,12 @@ -import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/shared/types'; - import { canViewOrManageAPIKeys, disabledAPIKeysFeature, disabledOrganizationBillingFeature, disabledUserBillingFeature, - isValidUrl, -} from '../../utils'; +} from '@clerk/shared/internal/clerk-js/componentGuards'; +import { isValidUrl } from '@clerk/shared/internal/clerk-js/url'; +import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/shared/types'; + import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants'; import type { NavbarRoute } from '../elements/Navbar'; import { Code, CreditCard, Organization, TickShield, User, Users } from '../icons'; @@ -14,7 +14,6 @@ import { localizationKeys } from '../localization'; import { ExternalElementMounter } from './ExternalElementMounter'; import { isDevelopmentSDK } from './runtimeEnvironment'; import { sanitizeCustomLinkURL } from './sanitizeCustomLinkURL'; - export type CustomPageContent = { url: string; mount: (el: HTMLDivElement) => void; @@ -248,7 +247,7 @@ const sanitizeCustomPageURL = (url: string): string => { if (isValidUrl(url)) { throw new Error('Clerk: Absolute URLs are not supported for custom pages'); } - return (url as string).charAt(0) === '/' && (url as string).length > 1 ? (url as string).substring(1) : url; + return url.charAt(0) === '/' && url.length > 1 ? url.substring(1) : url; }; const assertExternalLinkAsRoot = (routes: NavbarRoute[]) => { diff --git a/packages/clerk-js/src/ui/utils/createInfiniteAccessProxy.ts b/packages/ui/src/utils/createInfiniteAccessProxy.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/createInfiniteAccessProxy.ts rename to packages/ui/src/utils/createInfiniteAccessProxy.ts diff --git a/packages/clerk-js/src/ui/utils/createSlug.ts b/packages/ui/src/utils/createSlug.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/createSlug.ts rename to packages/ui/src/utils/createSlug.ts diff --git a/packages/clerk-js/src/ui/utils/cssSupports.ts b/packages/ui/src/utils/cssSupports.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/cssSupports.ts rename to packages/ui/src/utils/cssSupports.ts diff --git a/packages/clerk-js/src/ui/utils/cssVariables.ts b/packages/ui/src/utils/cssVariables.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/cssVariables.ts rename to packages/ui/src/utils/cssVariables.ts diff --git a/packages/clerk-js/src/utils/disambiguateRedirectOptions.ts b/packages/ui/src/utils/disambiguateRedirectOptions.ts similarity index 100% rename from packages/clerk-js/src/utils/disambiguateRedirectOptions.ts rename to packages/ui/src/utils/disambiguateRedirectOptions.ts diff --git a/packages/clerk-js/src/utils/dynamicParamParser.ts b/packages/ui/src/utils/dynamicParamParser.ts similarity index 100% rename from packages/clerk-js/src/utils/dynamicParamParser.ts rename to packages/ui/src/utils/dynamicParamParser.ts diff --git a/packages/clerk-js/src/ui/utils/errorHandler.ts b/packages/ui/src/utils/errorHandler.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/errorHandler.ts rename to packages/ui/src/utils/errorHandler.ts diff --git a/packages/clerk-js/src/utils/appearance.ts b/packages/ui/src/utils/extractCssLayerNameFromAppearance.ts similarity index 96% rename from packages/clerk-js/src/utils/appearance.ts rename to packages/ui/src/utils/extractCssLayerNameFromAppearance.ts index 38f3461128e..69a0cd84c51 100644 --- a/packages/clerk-js/src/utils/appearance.ts +++ b/packages/ui/src/utils/extractCssLayerNameFromAppearance.ts @@ -4,7 +4,7 @@ import type { Appearance, BaseTheme } from '@clerk/shared/types'; * Extracts cssLayerName from theme/baseTheme and moves it to appearance level. * Handles both the new 'theme' property and deprecated 'baseTheme' property. */ -export function processCssLayerNameExtraction(appearance: Appearance | undefined): Appearance | undefined { +export function extractCssLayerNameFromAppearance(appearance: Appearance | undefined): Appearance | undefined { if (!appearance || typeof appearance !== 'object') { return appearance; } diff --git a/packages/clerk-js/src/ui/utils/factorSorting.ts b/packages/ui/src/utils/factorSorting.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/factorSorting.ts rename to packages/ui/src/utils/factorSorting.ts diff --git a/packages/clerk-js/src/ui/utils/formatDate.ts b/packages/ui/src/utils/formatDate.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/formatDate.ts rename to packages/ui/src/utils/formatDate.ts diff --git a/packages/clerk-js/src/ui/utils/formatSafeIdentifier.ts b/packages/ui/src/utils/formatSafeIdentifier.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/formatSafeIdentifier.ts rename to packages/ui/src/utils/formatSafeIdentifier.ts diff --git a/packages/clerk-js/src/ui/utils/fromEntries.ts b/packages/ui/src/utils/fromEntries.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/fromEntries.ts rename to packages/ui/src/utils/fromEntries.ts diff --git a/packages/clerk-js/src/ui/utils/getClosestProfileScrollBox.ts b/packages/ui/src/utils/getClosestProfileScrollBox.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/getClosestProfileScrollBox.ts rename to packages/ui/src/utils/getClosestProfileScrollBox.ts diff --git a/packages/clerk-js/src/ui/utils/getRelativeToNowDateKey.ts b/packages/ui/src/utils/getRelativeToNowDateKey.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/getRelativeToNowDateKey.ts rename to packages/ui/src/utils/getRelativeToNowDateKey.ts diff --git a/packages/clerk-js/src/ui/utils/getValidReactChildren.ts b/packages/ui/src/utils/getValidReactChildren.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/getValidReactChildren.ts rename to packages/ui/src/utils/getValidReactChildren.ts diff --git a/packages/clerk-js/src/utils/image.ts b/packages/ui/src/utils/image.ts similarity index 100% rename from packages/clerk-js/src/utils/image.ts rename to packages/ui/src/utils/image.ts diff --git a/packages/clerk-js/src/ui/utils/intl.ts b/packages/ui/src/utils/intl.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/intl.ts rename to packages/ui/src/utils/intl.ts diff --git a/packages/clerk-js/src/ui/utils/isMobileDevice.ts b/packages/ui/src/utils/isMobileDevice.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/isMobileDevice.ts rename to packages/ui/src/utils/isMobileDevice.ts diff --git a/packages/clerk-js/src/ui/utils/mergeRefs.ts b/packages/ui/src/utils/mergeRefs.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/mergeRefs.ts rename to packages/ui/src/utils/mergeRefs.ts diff --git a/packages/clerk-js/src/utils/normalizeRoutingOptions.ts b/packages/ui/src/utils/normalizeRoutingOptions.ts similarity index 83% rename from packages/clerk-js/src/utils/normalizeRoutingOptions.ts rename to packages/ui/src/utils/normalizeRoutingOptions.ts index 9d18688b989..43bb1a2fe46 100644 --- a/packages/clerk-js/src/utils/normalizeRoutingOptions.ts +++ b/packages/ui/src/utils/normalizeRoutingOptions.ts @@ -1,7 +1,6 @@ +import { clerkInvalidRoutingStrategy } from '@clerk/shared/internal/clerk-js/errors'; import type { RoutingOptions, RoutingStrategy } from '@clerk/shared/types'; -import { clerkInvalidRoutingStrategy } from '../core/errors'; - export const normalizeRoutingOptions = ({ routing, path, diff --git a/packages/clerk-js/src/utils/one-tap.ts b/packages/ui/src/utils/one-tap.ts similarity index 92% rename from packages/clerk-js/src/utils/one-tap.ts rename to packages/ui/src/utils/one-tap.ts index 4b56a2b083a..cd37c7656f0 100644 --- a/packages/clerk-js/src/utils/one-tap.ts +++ b/packages/ui/src/utils/one-tap.ts @@ -1,7 +1,6 @@ +import { clerkFailedToLoadThirdPartyScript } from '@clerk/shared/internal/clerk-js/errors'; import { loadScript } from '@clerk/shared/loadScript'; -import { clerkFailedToLoadThirdPartyScript } from '../core/errors'; - interface GISCredentialResponse { credential: string; } diff --git a/packages/clerk-js/src/ui/utils/originPrefersPopup.ts b/packages/ui/src/utils/originPrefersPopup.ts similarity index 88% rename from packages/clerk-js/src/ui/utils/originPrefersPopup.ts rename to packages/ui/src/utils/originPrefersPopup.ts index 41239354688..26c107cfd9f 100644 --- a/packages/clerk-js/src/ui/utils/originPrefersPopup.ts +++ b/packages/ui/src/utils/originPrefersPopup.ts @@ -1,4 +1,4 @@ -import { inIframe } from '@/utils'; +import { inIframe } from '@clerk/shared/internal/clerk-js/runtime'; const POPUP_PREFERRED_ORIGINS = [ '.lovable.app', diff --git a/packages/clerk-js/src/ui/utils/passwordUtils.ts b/packages/ui/src/utils/passwordUtils.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/passwordUtils.ts rename to packages/ui/src/utils/passwordUtils.ts diff --git a/packages/clerk-js/src/ui/utils/phoneUtils.ts b/packages/ui/src/utils/phoneUtils.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/phoneUtils.ts rename to packages/ui/src/utils/phoneUtils.ts diff --git a/packages/clerk-js/src/ui/utils/range.ts b/packages/ui/src/utils/range.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/range.ts rename to packages/ui/src/utils/range.ts diff --git a/packages/clerk-js/src/ui/utils/readObjectPath.ts b/packages/ui/src/utils/readObjectPath.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/readObjectPath.ts rename to packages/ui/src/utils/readObjectPath.ts diff --git a/packages/clerk-js/src/ui/utils/removeUndefinedProps.ts b/packages/ui/src/utils/removeUndefinedProps.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/removeUndefinedProps.ts rename to packages/ui/src/utils/removeUndefinedProps.ts diff --git a/packages/clerk-js/src/ui/utils/roleLocalizationKey.ts b/packages/ui/src/utils/roleLocalizationKey.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/roleLocalizationKey.ts rename to packages/ui/src/utils/roleLocalizationKey.ts diff --git a/packages/clerk-js/src/ui/utils/runtimeEnvironment.ts b/packages/ui/src/utils/runtimeEnvironment.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/runtimeEnvironment.ts rename to packages/ui/src/utils/runtimeEnvironment.ts diff --git a/packages/clerk-js/src/ui/utils/sanitizeCustomLinkURL.ts b/packages/ui/src/utils/sanitizeCustomLinkURL.ts similarity index 62% rename from packages/clerk-js/src/ui/utils/sanitizeCustomLinkURL.ts rename to packages/ui/src/utils/sanitizeCustomLinkURL.ts index 0e796bda554..04455a11f1d 100644 --- a/packages/clerk-js/src/ui/utils/sanitizeCustomLinkURL.ts +++ b/packages/ui/src/utils/sanitizeCustomLinkURL.ts @@ -1,4 +1,4 @@ -import { isValidUrl } from '../../utils'; +import { isValidUrl } from '@clerk/shared/internal/clerk-js/url'; export const sanitizeCustomLinkURL = (url: string): string => { if (!url) { @@ -7,5 +7,5 @@ export const sanitizeCustomLinkURL = (url: string): string => { if (isValidUrl(url)) { return url; } - return (url as string).charAt(0) === '/' ? url : `/${url}`; + return url.charAt(0) === '/' ? url : `/${url}`; }; diff --git a/packages/ui/src/utils/setWebpackChunkPublicPath.ts b/packages/ui/src/utils/setWebpackChunkPublicPath.ts new file mode 100644 index 00000000000..886daf54594 --- /dev/null +++ b/packages/ui/src/utils/setWebpackChunkPublicPath.ts @@ -0,0 +1,44 @@ +/** + * A combination of settings a fixed __PKG_VERSION__ during build time + * and the runtime __webpack_public_path__ config option (https://webpack.js.org/guides/public-path/). + * We explicitly set the public path in order to account for all chunk caching scenarios. + * A specific version of clerk.browser.js file should always try to load its corresponding chunk versions, + * otherwise we risk hitting caching issues. + * + * Scenario: + * 1. We release clerk-js@1.0.0 containing: clerk.browser.js, chunkA-1.0.0.js, chunkB-1.0.0.js + * 2. A user opens an app using Clerk + * 3. The browser downloads and caches `/npm/@clerk/clerk-js@latest/dist/clerk.browser.js` + * 4. chunkA is needed so the browser downloads and caches `/npm/@clerk/clerk-js@latest/dist/chunkA-1.0.0.js` + * 5. Meanwhile, we release clerk-js@1.2.0 containing: clerk.browser.js, chunkA-1.2.0.js, chunkB-1.2.0.js + * On our CDN, @clerk/clerk-js@latest now points to the new version + * 6. A user opens the app again + * 7. The browser loads `/npm/@clerk/clerk-js@latest/dist/clerk.browser.js` FROM CACHE (v1.0.0 file) + * 8. chunkA is needed so the browser loads `/npm/@clerk/clerk-js@latest/dist/chunkA-1.0.0.js` FROM CACHE (v1.0.0 file) + * 9. chunkB is needed for the first time. The cached v1.0.0 clerk.browser.js will try to load (request) + * `/npm/@clerk/clerk-js@latest/dist/chunkA-1.0.0.js` but because clerk-js@latest now resolves to v1.2.0, + * the v1.0.0 file will not be found and the app will crash + * + * Solution: + * A given clerk.browser.js file will only load its corresponding chunks using a fixed version. Example: + * - clerk.browser.js loads from https://pk.accounts.dev/npm/@clerk/clerk-js@canary/dist/clerk.browser.js + * - all other chunks need to be loaded from https://pk.accounts.dev/npm/@clerk/clerk-js@__PKG_VERSION__/dist/ + */ +if (!__DEV__) { + const CLERKJS_NPM_PATH_REGEX = /(^.*\/@clerk\/clerk-js@)(.+?)(\/dist.*)/; + const setWebpackChunkPublicPath = () => { + try { + // @ts-expect-error + const scriptUrl = new URL(document.currentScript.src); + let hrefWithoutFilename = new URL(scriptUrl.href.split('/').slice(0, -1).join('/')).href; + hrefWithoutFilename += hrefWithoutFilename.endsWith('/') ? '' : '/'; + __webpack_public_path__ = hrefWithoutFilename.replace(CLERKJS_NPM_PATH_REGEX, `$1${__PKG_VERSION__}$3`); + } catch { + // + } + }; + setWebpackChunkPublicPath(); +} + +// Make this file a module to ESM TS happy +export {}; diff --git a/packages/clerk-js/src/ui/utils/sleep.ts b/packages/ui/src/utils/sleep.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/sleep.ts rename to packages/ui/src/utils/sleep.ts diff --git a/packages/clerk-js/src/ui/utils/timeAgo.ts b/packages/ui/src/utils/timeAgo.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/timeAgo.ts rename to packages/ui/src/utils/timeAgo.ts diff --git a/packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts b/packages/ui/src/utils/truncateTextWithEndVisible.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/truncateTextWithEndVisible.ts rename to packages/ui/src/utils/truncateTextWithEndVisible.ts diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/ui/src/utils/useFormControl.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/useFormControl.ts rename to packages/ui/src/utils/useFormControl.ts diff --git a/packages/clerk-js/src/ui/utils/usernameUtils.ts b/packages/ui/src/utils/usernameUtils.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/usernameUtils.ts rename to packages/ui/src/utils/usernameUtils.ts diff --git a/packages/clerk-js/src/ui/utils/web3CallbackErrorHandler.ts b/packages/ui/src/utils/web3CallbackErrorHandler.ts similarity index 100% rename from packages/clerk-js/src/ui/utils/web3CallbackErrorHandler.ts rename to packages/ui/src/utils/web3CallbackErrorHandler.ts diff --git a/packages/ui/src/utils/zxcvbn.ts b/packages/ui/src/utils/zxcvbn.ts new file mode 100644 index 00000000000..9a5f38fc288 --- /dev/null +++ b/packages/ui/src/utils/zxcvbn.ts @@ -0,0 +1,25 @@ +/** + * This file is duplicated from @clerk/clerk-js/src/utils/zxcvbn.ts + * to allow each package (@clerk/clerk-js and @clerk/ui) to inject + * its own zxcvbn dependency. This avoids cross-package dependencies + * and allows for better tree-shaking and bundle optimization. + */ +import type { ZxcvbnResult } from '@clerk/shared/types'; + +export type zxcvbnFN = (password: string, userInputs?: (string | number)[]) => ZxcvbnResult; + +export const loadZxcvbn = () => { + return Promise.all([import('@zxcvbn-ts/core'), import('@zxcvbn-ts/language-common')]).then( + ([coreModule, languageCommonModule]) => { + const { zxcvbnOptions, zxcvbn } = coreModule; + const { dictionary, adjacencyGraphs } = languageCommonModule; + zxcvbnOptions.setOptions({ + dictionary: { + ...dictionary, + }, + graphs: adjacencyGraphs, + }); + return zxcvbn; + }, + ); +}; diff --git a/packages/ui/tsconfig.declarations.json b/packages/ui/tsconfig.declarations.json new file mode 100644 index 00000000000..441fd4802fa --- /dev/null +++ b/packages/ui/tsconfig.declarations.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "declaration": true, + "declarationMap": true, + "emitDeclarationOnly": true, + "outDir": "./dist/types", + "noEmit": false + }, + "include": ["src"], + "exclude": [ + "node_modules", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.spec.ts", + "**/*.spec.tsx", + "src/**/__tests__", + "src/**/__mocks__" + ] +} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 00000000000..0c0c7babb68 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "rootDir": "src", + "verbatimModuleSyntax": true, + "target": "es2022", + "strict": true, + "skipLibCheck": true, + "resolveJsonModule": true, + "preserveWatchOutput": true, + "outDir": "dist", + "noUnusedLocals": true, + "moduleResolution": "bundler", + "moduleDetection": "force", + "module": "preserve", + "lib": ["ES2023", "DOM", "WebWorker"], + "jsx": "react-jsx", + "jsxImportSource": "@emotion/react", + "isolatedModules": true, + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "emitDeclarationOnly": true, + "declaration": true, + "declarationMap": true, + "allowJs": true, + "paths": { + "@/*": ["./src/*"], + // Adding this to avoid changes in the ui files + // in order to make git merges easier + // TODO: @nikos remove after v6 release + "@/ui*": ["./src/*"] + } + }, + "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"], + "include": ["src", "src/global.d.ts"] +} diff --git a/patches/yalc@1.0.0-pre.53.patch b/patches/yalc@1.0.0-pre.53.patch deleted file mode 100644 index 63221b43a9e..00000000000 --- a/patches/yalc@1.0.0-pre.53.patch +++ /dev/null @@ -1,69 +0,0 @@ -diff --git a/package.json b/package.json -index 930c1ca9954777dd1492a9e2373029d4644804cc..01e709cffb2a100bc6b0089edf91527d35b1b7fd 100644 ---- a/package.json -+++ b/package.json -@@ -37,6 +37,7 @@ - "ignore": "^5.0.4", - "ini": "^2.0.0", - "npm-packlist": "^2.1.5", -+ "yaml": "2.6.1", - "yargs": "^16.1.1" - }, - "devDependencies": { -diff --git a/src/copy.js b/src/copy.js -index 3a6dca7b7a6ffde2527e7866f923c56f7d7061b8..19ac807a17779219800a0230b0620a5dfd4c641d 100644 ---- a/src/copy.js -+++ b/src/copy.js -@@ -56,6 +56,7 @@ var fs_extra_1 = __importDefault(require("fs-extra")); - var ignore_1 = __importDefault(require("ignore")); - var npm_packlist_1 = __importDefault(require("npm-packlist")); - var path_1 = require("path"); -+var yaml_1 = require("yaml"); - var _1 = require("."); - var _2 = require("."); - var shortSignatureLength = 8; -@@ -120,6 +121,19 @@ var resolveWorkspaceDepVersion = function (version, pkgName, workingDir) { - return '*'; - } - }; -+var resolveCatalogDepVersion = function (subCatalog, pkgName, workingDir) { -+ var _a; -+ var workspaceFilePath = path_1.join(workingDir, '../../pnpm-workspace.yaml'); -+ var workspaceContent = fs_extra_1.default.readFileSync(workspaceFilePath, 'utf8'); -+ var workspaceYaml = yaml_1.parse(workspaceContent); -+ if (!workspaceYaml) { -+ console.warn('Could not find pnpm-workspace.yaml in the working directory.'); -+ } -+ var packages = subCatalog && subCatalog.length > 0 -+ ? ((_a = workspaceYaml === null || workspaceYaml === void 0 ? void 0 : workspaceYaml.catalogs) === null || _a === void 0 ? void 0 : _a[subCatalog]) || [] -+ : (workspaceYaml === null || workspaceYaml === void 0 ? void 0 : workspaceYaml.catalog) || []; -+ return packages[pkgName] || '*'; -+}; - var resolveWorkspaces = function (pkg, workingDir) { - var resolveDeps = function (deps) { - return deps -@@ -130,6 +144,12 @@ var resolveWorkspaces = function (pkg, workingDir) { - console.log("Resolving workspace package " + depPkgName + " version ==> " + resolved); - return resolved; - } -+ if (val.startsWith('catalog:')) { -+ var subCatalog = val.split(':')[1]; -+ var resolved = resolveCatalogDepVersion(subCatalog, depPkgName, workingDir); -+ console.log("Resolving catalog package " + depPkgName + " version ==> " + resolved); -+ return resolved; -+ } - return val; - }) - : deps; -@@ -160,9 +180,9 @@ exports.copyPackageToStore = function (options) { return __awaiter(void 0, void - case 2: - npmList = _c.sent(); - filesToCopy = npmList.filter(function (f) { return !ignoreRule.ignores(f); }); -- if (options.files) { -+ if (options.content) { - console.info('Files included in published content:'); -- filesToCopy.forEach(function (f) { -+ filesToCopy.sort().forEach(function (f) { - console.log("- " + f); - }); - console.info("Total " + filesToCopy.length + " files."); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04d44b4d694..96cff0d7c78 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -421,30 +421,15 @@ importers: '@base-org/account': specifier: 2.0.1 version: 2.0.1(@types/react@18.3.26)(react@18.3.1)(typescript@5.8.3)(use-sync-external-store@1.6.0(react@18.3.1))(zod@3.25.76) - '@clerk/localizations': - specifier: workspace:^ - version: link:../localizations '@clerk/shared': specifier: workspace:^ version: link:../shared + '@clerk/ui': + specifier: workspace:^ + version: link:../ui '@coinbase/wallet-sdk': specifier: 4.3.0 version: 4.3.0 - '@emotion/cache': - specifier: 11.11.0 - version: 11.11.0 - '@emotion/react': - specifier: 11.11.1 - version: 11.11.1(@types/react@18.3.26)(react@18.3.1) - '@floating-ui/react': - specifier: 0.27.12 - version: 0.27.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@floating-ui/react-dom': - specifier: ^2.1.3 - version: 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@formkit/auto-animate': - specifier: ^0.8.2 - version: 0.8.4 '@stripe/stripe-js': specifier: 5.6.0 version: 5.6.0 @@ -463,9 +448,6 @@ importers: browser-tabs-lock: specifier: 1.3.0 version: 1.3.0 - copy-to-clipboard: - specifier: 3.3.3 - version: 3.3.3 core-js: specifier: 3.41.0 version: 3.41.0 @@ -475,18 +457,6 @@ importers: dequal: specifier: 2.0.3 version: 2.0.3 - input-otp: - specifier: 1.4.2 - version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - qrcode.react: - specifier: 4.2.0 - version: 4.2.0(react@18.3.1) - react: - specifier: 18.3.1 - version: 18.3.1 - react-dom: - specifier: 18.3.1 - version: 18.3.1(react@18.3.1) regenerator-runtime: specifier: 0.14.1 version: 0.14.1 @@ -946,6 +916,88 @@ importers: specifier: catalog:repo version: 8.5.0(jiti@2.6.1)(postcss@8.5.6)(tsx@4.20.6)(typescript@5.8.3)(yaml@2.8.1) + packages/ui: + dependencies: + '@clerk/localizations': + specifier: workspace:^ + version: link:../localizations + '@clerk/shared': + specifier: workspace:^ + version: link:../shared + '@emotion/cache': + specifier: 11.11.0 + version: 11.11.0 + '@emotion/react': + specifier: 11.11.1 + version: 11.11.1(@types/react@18.3.26)(react@18.3.1) + '@floating-ui/react': + specifier: 0.27.12 + version: 0.27.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@formkit/auto-animate': + specifier: ^0.8.2 + version: 0.8.4 + '@zxcvbn-ts/core': + specifier: 3.0.4 + version: 3.0.4 + '@zxcvbn-ts/language-common': + specifier: 3.0.4 + version: 3.0.4 + copy-to-clipboard: + specifier: 3.3.3 + version: 3.3.3 + csstype: + specifier: 3.1.3 + version: 3.1.3 + dequal: + specifier: 2.0.3 + version: 2.0.3 + input-otp: + specifier: 1.4.2 + version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + qrcode.react: + specifier: 4.2.0 + version: 4.2.0(react@18.3.1) + react: + specifier: 18.3.1 + version: 18.3.1 + react-dom: + specifier: 18.3.1 + version: 18.3.1(react@18.3.1) + swr: + specifier: 2.3.4 + version: 2.3.4(react@18.3.1) + devDependencies: + '@rspack/cli': + specifier: ^1.4.11 + version: 1.5.8(@rspack/core@1.5.8(@swc/helpers@0.5.17))(@types/express@4.17.25)(webpack@5.102.1) + '@rspack/core': + specifier: ^1.4.11 + version: 1.5.8(@swc/helpers@0.5.17) + '@rspack/plugin-react-refresh': + specifier: ^1.5.0 + version: 1.5.2(react-refresh@0.17.0) + '@stripe/react-stripe-js': + specifier: 3.1.1 + version: 3.1.1(@stripe/stripe-js@5.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@stripe/stripe-js': + specifier: 5.6.0 + version: 5.6.0 + '@svgr/webpack': + specifier: ^6.5.1 + version: 6.5.1 + '@types/webpack-env': + specifier: ^1.18.8 + version: 1.18.8 + bundlewatch: + specifier: ^0.4.1 + version: 0.4.1 + cross-fetch: + specifier: ^4.1.0 + version: 4.1.0 + webpack-merge: + specifier: ^5.10.0 + version: 5.10.0 + packages/upgrade: dependencies: '@inkjs/ui': diff --git a/scripts/common.mjs b/scripts/common.mjs index 2b89ee55462..f0ef15c903e 100644 --- a/scripts/common.mjs +++ b/scripts/common.mjs @@ -1,4 +1,26 @@ +import { readFile } from 'fs/promises'; +import { $ } from 'zx'; + export const constants = { ChangesetConfigFile: '.changeset/config.json', ElementsPackageJson: 'packages/elements/package.json', }; + +export async function getPackageNames() { + const packageJsonFiles = await $`find packages -mindepth 2 -maxdepth 2 -name package.json`.quiet(); + const packageNames = []; + + for (const file of packageJsonFiles.stdout.trim().split('\n').filter(Boolean)) { + try { + const packageJsonContent = await readFile(file, 'utf-8'); + const packageJson = JSON.parse(packageJsonContent); + if (packageJson.name) { + packageNames.push(packageJson.name); + } + } catch { + // package.json doesn't exist or is invalid, skip + } + } + + return packageNames.sort(); +} diff --git a/scripts/rspack-common.js b/scripts/rspack-common.js new file mode 100644 index 00000000000..807382491cf --- /dev/null +++ b/scripts/rspack-common.js @@ -0,0 +1,130 @@ +// @ts-check +/** + * Common rspack configuration utilities shared between packages + */ + +/** + * SVG loader configuration using SVGR + * @returns {import('@rspack/core').RuleSetRule} + */ +const svgLoader = () => { + return { + test: /\.svg$/, + resolve: { + fullySpecified: false, + }, + use: { + loader: '@svgr/webpack', + options: { + svgo: true, + svgoConfig: { + floatPrecision: 3, + transformPrecision: 1, + plugins: ['preset-default', 'removeDimensions', 'removeStyleElement'], + }, + }, + }, + }; +}; + +/** + * TypeScript loader for production builds + * @param {object} [options] + * @param {string} [options.targets] - Browserslist targets + * @param {boolean} [options.useCoreJs] - Whether to use core-js polyfills + * @returns {import('@rspack/core').RuleSetRule[]} + */ +const typescriptLoaderProd = ({ targets, useCoreJs = false } = {}) => { + return [ + { + test: /\.(jsx?|tsx?)$/, + exclude: /node_modules/, + use: { + loader: 'builtin:swc-loader', + options: { + env: { + ...(targets ? { targets } : {}), + ...(useCoreJs + ? { + mode: 'usage', + coreJs: require('core-js/package.json').version, + } + : {}), + }, + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + externalHelpers: true, + transform: { + react: { + runtime: 'automatic', + importSource: '@emotion/react', + development: false, + refresh: false, + }, + }, + }, + }, + }, + }, + ...(useCoreJs + ? [ + { + test: /\.m?js$/, + exclude: /node_modules[\\/]core-js/, + use: { + loader: 'builtin:swc-loader', + options: { + env: { + ...(targets ? { targets } : {}), + mode: 'usage', + coreJs: '3.41.0', + }, + isModule: 'unknown', + }, + }, + }, + ] + : []), + ]; +}; + +/** + * TypeScript loader for development builds + * @returns {import('@rspack/core').RuleSetRule[]} + */ +const typescriptLoaderDev = () => { + return [ + { + test: /\.(jsx?|tsx?)$/, + exclude: /node_modules/, + loader: 'builtin:swc-loader', + options: { + jsc: { + target: 'esnext', + parser: { + syntax: 'typescript', + tsx: true, + }, + externalHelpers: true, + transform: { + react: { + runtime: 'automatic', + importSource: '@emotion/react', + development: true, + refresh: true, + }, + }, + }, + }, + }, + ]; +}; + +module.exports = { + svgLoader, + typescriptLoaderProd, + typescriptLoaderDev, +}; diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs index 08c5a4db87e..fc61227a69d 100755 --- a/scripts/snapshot.mjs +++ b/scripts/snapshot.mjs @@ -2,23 +2,13 @@ import { $, argv, echo } from 'zx'; -import { constants } from './common.mjs'; +import { constants, getPackageNames } from './common.mjs'; + +const packageNames = await getPackageNames(); +const packageEntries = packageNames.map(name => `'${name}': patch`).join('\n'); const snapshot = `--- -'@clerk/chrome-extension': patch -'@clerk/localizations': patch -'@clerk/clerk-js': patch -'@clerk/backend': patch -'@clerk/fastify': patch -'@clerk/agent-toolkit': patch -'@clerk/nextjs': patch -'@clerk/shared': patch -'@clerk/themes': patch -'@clerk/react': patch -'@clerk/expo': patch -'@clerk/express': patch -'@clerk/testing': patch -'@clerk/elements': patch +${packageEntries} --- Snapshot release