refactor(elements): Refactor code to relevant locations (#2513)

* refactor(elements): Move code to relevant sections in the codebase

* chore(elements): Add changeset

* chore(elements): Force slash in import paths

.changeset/moody-pears-trade.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
   root: true,
   extends: ['custom/browser', 'custom/typescript', 'custom/jest', 'custom/react'],
-  // rules: {},
+  rules: {
+    'import/no-unresolved': [2, { ignore: ['^~/'] }],
+  },
   // overrides: [],
 };

packages/elements/src/index.tsx → packages/elements/src/index.ts

@@ -1,9 +1,10 @@
 'use client';
-import { useNextRouter } from './internals/router';
+
+import { useNextRouter } from '~/react/router/next';
 
 /** Common Components */
-export { Errors, Field, FieldState, Form, Input, Label, Submit } from './common/form';
-export { SocialProviders } from './common/social-providers';
+export { Errors, Field, FieldState, Form, Input, Label, Submit } from '~/react/common/form';
+export { SocialProviders } from '~/react/common/social-providers';
 
 /** Sign In Components */
 export {
@@ -14,8 +15,8 @@ export {
   SignInSSOCallback,
   SignInStrategies,
   SignInStrategy,
-} from './sign-in';
+} from '~/react/sign-in';
 
 /** Hooks */
-export { useSignInFlow, useSignInFlowSelector } from './internals/machines/sign-in.context';
+export { useSignInFlow, useSignInFlowSelector } from '~/internals/machines/sign-in.context';
 export { useNextRouter };

packages/elements/src/internals/machines/form.context.ts

@@ -1,7 +1,7 @@
 import { createActorContext } from '@xstate/react';
 import type { SnapshotFrom } from 'xstate';
 
-import { FormMachine } from './form.machine';
+import { FormMachine } from '~/internals/machines/form.machine';
 
 export type SnapshotState = SnapshotFrom<typeof FormMachine>;
 

packages/elements/src/internals/machines/form.machine.ts

@@ -2,7 +2,8 @@ import { isClerkAPIResponseError } from '@clerk/shared/error';
 import type { MachineContext } from 'xstate';
 import { assign, enqueueActions, setup } from 'xstate';
 
-import { ClerkElementsError, ClerkElementsFieldError } from '../errors/error';
+import { ClerkElementsError, ClerkElementsFieldError } from '~/internals/errors/error';
+
 import type { FieldDetails } from './form.types';
 
 export interface FormMachineContext extends MachineContext {

packages/elements/src/internals/machines/form.types.ts

@@ -1,4 +1,4 @@
-import type { ClerkElementsFieldError } from '../errors/error';
+import type { ClerkElementsFieldError } from '~/internals/errors/error';
 
 export type FieldDetails = {
   name?: string;

packages/elements/src/internals/machines/sign-in.actors.ts

@@ -12,8 +12,9 @@ import type {
 } from '@clerk/types';
 import { fromPromise } from 'xstate';
 
-import { ClerkElementsRuntimeError } from '../errors/error';
-import type { ClerkRouter } from '../router';
+import { ClerkElementsRuntimeError } from '~/internals/errors/error';
+import type { ClerkRouter } from '~/react/router';
+
 import type { SignInMachineContext } from './sign-in.machine';
 import type { WithClerk, WithClient, WithParams } from './sign-in.types';
 import { assertIsDefined } from './utils/assert';

packages/elements/src/internals/machines/sign-in.context.ts

@@ -4,12 +4,13 @@ import type React from 'react';
 import { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import type { SnapshotFrom } from 'xstate';
 
+import { ClerkElementsRuntimeError } from '~/internals/errors/error';
 import {
   getEnabledThirdPartyProviders,
   isAuthenticatableOauthStrategy,
   isWeb3Strategy,
-} from '../../utils/third-party-strategies';
-import { ClerkElementsRuntimeError } from '../errors/error';
+} from '~/utils/third-party-strategies';
+
 import { SignInMachine } from './sign-in.machine';
 import type { SignInStrategyName } from './sign-in.types';
 import { matchStrategy } from './utils/strategies';
@@ -70,15 +71,15 @@ export function useStrategy(name: SignInStrategyName) {
   };
 }
 
-export const useSignInState = () => {
+export const useSignInStateMatcher = () => {
   return useSignInFlowSelector(
     state => state,
-    // (prev, next) => prev.value === next.value && prev.tags === next.tags,
+    (prev, next) => prev.value === next.value,
   );
 };
 
 export function useSignInStrategies(_preferred?: SignInStrategy) {
-  const state = useSignInState();
+  const state = useSignInStateMatcher();
   const current = useSignInFlowSelector(clerkCurrentStrategy);
 
   const shouldRender = state.matches('FirstFactor') || state.matches('SecondFactor');

packages/elements/src/internals/machines/sign-in.machine.ts

@@ -14,7 +14,8 @@ import type {
 import type { ActorRefFrom, ErrorActorEvent, MachineContext } from 'xstate';
 import { and, assertEvent, assign, not, or, sendTo, setup } from 'xstate';
 
-import type { ClerkRouter } from '../router';
+import type { ClerkRouter } from '~/react/router';
+
 import type { FormMachine } from './form.machine';
 import { waitForClerk } from './shared.actors';
 import {
@@ -401,7 +402,6 @@ export const SignInMachine = setup({
         Failure: {
           type: 'final',
           target: '#SignIn.DeterminingState',
-          reenter: true,
         },
       },
     },
@@ -501,7 +501,6 @@ export const SignInMachine = setup({
         Failure: {
           type: 'final',
           target: '#SignIn.DeterminingState',
-          reenter: true,
         },
       },
     },

packages/elements/src/common/form.tsx → packages/elements/src/react/common/form.tsx

@@ -12,15 +12,15 @@ import type { HTMLProps, ReactNode } from 'react';
 import React, { createContext, useCallback, useContext, useEffect } from 'react';
 import type { BaseActorRef } from 'xstate';
 
-import type { ClerkElementsError } from '../internals/errors/error';
+import type { ClerkElementsError } from '~/internals/errors/error';
 import {
   fieldErrorsSelector,
   fieldHasValueSelector,
   globalErrorsSelector,
   useFormSelector,
   useFormStore,
-} from '../internals/machines/form.context';
-import type { FieldDetails } from '../internals/machines/form.types';
+} from '~/internals/machines/form.context';
+import type { FieldDetails } from '~/internals/machines/form.types';
 
 const FieldContext = createContext<Pick<FieldDetails, 'name'> | null>(null);
 const useFieldContext = () => useContext(FieldContext);

packages/elements/src/common/social-providers.tsx → packages/elements/src/react/common/social-providers.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 
-import { useThirdPartyProviders } from '../internals/machines/sign-in.context';
-import { type ThirdPartyStrategy } from '../utils/third-party-strategies';
+import { useThirdPartyProviders } from '~/internals/machines/sign-in.context';
+import { type ThirdPartyStrategy } from '~/utils/third-party-strategies';
 
 export function SocialProviders({ render: provider }: { render(provider: ThirdPartyStrategy): React.ReactNode }) {
   const thirdPartyProviders = useThirdPartyProviders();

packages/elements/src/react/router/index.ts

@@ -0,0 +1,4 @@
+export { useNextRouter } from './next';
+export { Route, Router, useClerkRouter } from './react';
+
+export type { ClerkRouter, ClerkHostRouter } from './router';

packages/elements/src/react/router/next.ts

@@ -0,0 +1,20 @@
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import type { ClerkHostRouter } from './router';
+
+/**
+ * Framework specific router integrations
+ */
+
+export const useNextRouter = (): ClerkHostRouter => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  return {
+    push: (path: string) => router.push(path),
+    replace: (path: string) => router.replace(path),
+    pathname: () => pathname,
+    searchParams: () => searchParams,
+  };
+};

packages/elements/src/internals/router.tsx → packages/elements/src/react/router/router.ts

@@ -1,5 +1,3 @@
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-
 export const PRESERVED_QUERYSTRING_PARAMS = ['after_sign_in_url', 'after_sign_up_url', 'redirect_url'];
 
 /**
@@ -112,20 +110,3 @@ export function createClerkRouter(router: ClerkHostRouter, basePath: string = '/
     searchParams: router.searchParams,
   };
 }
-
-/**
- * Framework specific router integrations
- */
-
-export const useNextRouter = (): ClerkHostRouter => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  return {
-    push: (path: string) => router.push(path),
-    replace: (path: string) => router.replace(path),
-    pathname: () => pathname,
-    searchParams: () => searchParams,
-  };
-};

packages/elements/src/sign-in/index.tsx → packages/elements/src/react/sign-in/index.tsx

@@ -5,20 +5,19 @@ import type { SignInStrategy as ClerkSignInStrategy } from '@clerk/types';
 import type { createBrowserInspector } from '@statelyai/inspect';
 import type { PropsWithChildren } from 'react';
 
-import { Form } from '../common/form';
-import { FormStoreProvider, useFormStore } from '../internals/machines/form.context';
+import { FormStoreProvider, useFormStore } from '~/internals/machines/form.context';
 import {
   SignInFlowProvider as SignInFlowContextProvider,
   StrategiesContext,
   useSignInFlow,
-  useSignInState,
+  useSignInStateMatcher,
   useSignInStrategies,
   useSSOCallbackHandler,
   useStrategy,
-} from '../internals/machines/sign-in.context';
-import type { LoadedClerkWithEnv, SignInStrategyName } from '../internals/machines/sign-in.types';
-import { useNextRouter } from '../internals/router';
-import { Route, Router, useClerkRouter } from '../internals/router-react';
+} from '~/internals/machines/sign-in.context';
+import type { LoadedClerkWithEnv, SignInStrategyName } from '~/internals/machines/sign-in.types';
+import { Form } from '~/react/common/form';
+import { Route, Router, useClerkRouter, useNextRouter } from '~/react/router';
 
 // ================= XState Inspector ================= //
 
@@ -89,7 +88,7 @@ export function SignIn({ children }: PropsWithChildren): JSX.Element | null {
 // ================= SignInStart ================= //
 
 export function SignInStart({ children }: PropsWithChildren) {
-  const state = useSignInState();
+  const state = useSignInStateMatcher();
   const actorRef = useSignInFlow();
 
   return state.matches('Start') ? <Form flowActor={actorRef}>{children}</Form> : null;
@@ -98,7 +97,7 @@ export function SignInStart({ children }: PropsWithChildren) {
 // ================= SignInFactorOne ================= //
 
 export function SignInFactorOne({ children }: PropsWithChildren) {
-  const state = useSignInState();
+  const state = useSignInStateMatcher();
   const actorRef = useSignInFlow();
 
   return state.matches('FirstFactor') ? <Form flowActor={actorRef}>{children}</Form> : null;
@@ -107,7 +106,7 @@ export function SignInFactorOne({ children }: PropsWithChildren) {
 // ================= SignInFactorTwo ================= //
 
 export function SignInFactorTwo({ children }: PropsWithChildren) {
-  const state = useSignInState();
+  const state = useSignInStateMatcher();
   const actorRef = useSignInFlow();
 
   return state.matches('SecondFactor') ? <Form flowActor={actorRef}>{children}</Form> : null;

packages/elements/tsconfig.json

@@ -19,7 +19,10 @@
     "skipLibCheck": true,
     "sourceMap": false,
     "strict": true,
-    "target": "ES2020"
+    "target": "ES2020",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

packages/elements/tsconfig.lint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "./*.ts"],
+  "exclude": ["node_modules"]
+}

packages/elements/tsup.config.ts

@@ -16,7 +16,7 @@ export default defineConfig(overrideOptions => {
     },
     dts: true,
     entry: {
-      index: 'src/index.tsx',
+      index: 'src/index.ts',
     },
     external: ['react', 'react-dom'],
     format: ['cjs', 'esm'],