refactor(elements): Split out contexts and hooks (#2695)

* refactor(elements): Split out Sign In * refactor(elements): Standardize SignIn context * refactor(elements): Split out Sign Up * chore(elements): Remove temp router machine * chore(elements): Add changeset
clerk · Jan 31, 2024 · ff19827 · ff19827
1 parent 7f751c4
commit ff19827
Show file tree

Hide file tree

Showing 30 changed files with 376 additions and 376 deletions.
diff --git a/.changeset/wise-drinks-divide.md b/.changeset/wise-drinks-divide.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/elements/examples/nextjs/components/sign-in-debug.tsx b/packages/elements/examples/nextjs/components/sign-in-debug.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import { SignedIn } from '@clerk/clerk-react';
-import { useSignInFlow, useSignInFlowSelector } from '@clerk/elements/sign-in';
+import { useSignInActorRef_internal, useSignInSelector_internal } from '@clerk/elements/sign-in';
 import { SignOutButton } from '@clerk/nextjs';
 
 import { Button } from './design';
 
 function SignInActiveState() {
-  const activeState = useSignInFlowSelector(state => state.value);
+  const activeState = useSignInSelector_internal(state => state.value);
   const state = activeState ? (typeof activeState === 'string' ? activeState : JSON.stringify({ ...activeState })) : '';
 
   return (
@@ -18,7 +18,7 @@ function SignInActiveState() {
 }
 
 export function SignInLogButtons() {
-  const ref = useSignInFlow();
+  const ref = useSignInActorRef_internal();
 
   return (
     <>

diff --git a/packages/elements/examples/nextjs/components/sign-up-debug.tsx b/packages/elements/examples/nextjs/components/sign-up-debug.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import { SignedIn } from '@clerk/clerk-react';
-import { useSignUpFlow, useSignUpFlowSelector } from '@clerk/elements/sign-up';
+import { useSignUpActorRef_internal, useSignUpSelector_internal } from '@clerk/elements/sign-up';
 import { SignOutButton } from '@clerk/nextjs';
 
 import { Button } from './design';
 
 function SignUpActiveState() {
-  const activeState = useSignUpFlowSelector(state => state.value);
+  const activeState = useSignUpSelector_internal(state => state.value);
   const state = activeState ? (typeof activeState === 'string' ? activeState : JSON.stringify({ ...activeState })) : '';
 
   return (
@@ -18,7 +18,7 @@ function SignUpActiveState() {
 }
 
 export function SignUpLogButtons() {
-  const ref = useSignUpFlow();
+  const ref = useSignUpActorRef_internal();
 
   return (
     <>

diff --git a/packages/elements/src/internals/machines/sign-in/sign-in.context.ts b/packages/elements/src/internals/machines/sign-in/sign-in.context.ts
diff --git a/packages/elements/src/internals/machines/sign-in/sign-in.machine.ts b/packages/elements/src/internals/machines/sign-in/sign-in.machine.ts
@@ -49,6 +49,8 @@ export interface SignInMachineInput {
   router: ClerkRouter;
 }
 
+export type SignInMachineTags = 'state:start' | 'state:first-factor' | 'state:second-factor' | 'external';
+
 export type SignInMachineEvents =
   | ErrorActorEvent
   | { type: 'AUTHENTICATE.OAUTH'; strategy: OAuthStrategy }
@@ -62,6 +64,7 @@ export interface SignInMachineTypes {
   context: SignInMachineContext;
   input: SignInMachineInput;
   events: SignInMachineEvents;
+  tags: SignInMachineTags;
 }
 
 export const SignInMachine = setup({
@@ -237,6 +240,7 @@ export const SignInMachine = setup({
     },
     Start: {
       id: 'Start',
+      tags: 'state:start',
       description: 'The intial state of the sign-in flow.',
       initial: 'AwaitingInput',
       on: {
@@ -291,6 +295,7 @@ export const SignInMachine = setup({
       },
     },
     FirstFactor: {
+      tags: 'state:first-factor',
       initial: 'DeterminingState',
       entry: 'assignStartingFirstFactor',
       onDone: [
@@ -378,6 +383,7 @@ export const SignInMachine = setup({
       },
     },
     SecondFactor: {
+      tags: 'state:second-factor',
       initial: 'DeterminingState',
       entry: 'assignStartingSecondFactor',
       onDone: [