feat(elements): Compilation of updates (#2790)

* chore(elements): Interim commit * chore(elements): Interim commit * chore(elements): Interim commit * feat(elements): Large refactor; Interim commit * chore(elements): Update folder architecture (pt 1) * refactor(elements): Split out machines; Interim commit * chore(elements): Rename Continue to Verify * fix(elements): Account for resources in NEXT events * chore(elements): Clean up * refactor(elements): Interim commit * chore(elements): Update SignUp to match SignIn * chore(elements): Updated logs * chore(elements): /errors/error -> /errors * chore(elements): Add changeset * feat(elements): Handle SSO callbacks (#2791) * feat(elements): Handle SSO callbacks * fix(elements): Use constants --------- Co-authored-by: LekoArts <[email protected]> * chore(elements): Use other imports * fix(elements): Use constants * fix(elements): Typo * chore(elements): Add test * chore(elements): Bump version --------- Co-authored-by: LekoArts <[email protected]>
clerk · Feb 13, 2024 · fc23339 · fc23339
1 parent a905864
commit fc23339
Show file tree

Hide file tree

Showing 79 changed files with 3,503 additions and 585 deletions.
diff --git a/.changeset/ten-spies-brake.md b/.changeset/ten-spies-brake.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/elements/README.md b/packages/elements/README.md
@@ -71,3 +71,48 @@ npm run e2e -- --headed
 # Specific Tests: https://playwright.dev/docs/running-tests#run-specific-tests
 npm run e2e -- e2e/elements.spec.ts
 ```
+
+### Flows
+
+Flows per `clerk-js` UI components
+
+#### `<SignInRoutes>`
+
+```
+/sign-in
+  /factor-one               <SignInFactorOne />
+  /factor-two               <SignInFactorTwo />
+  /reset-password           <ResetPassword />
+  /reset-password-success   <ResetPasswordSuccess />
+  /sso-callback             <SignInSSOCallback {...} />
+  /choose                   <SignInAccountSwitcher />
+  /verify                   <SignInEmailLinkFlowComplete {...} />
+  /                         <SignInStart />
+  [ELSE]                    <RedirectToSignIn />
+```
+
+#### `<SignUpRoutes>`
+
+```
+/sign-up
+  /verify-email-address     <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
+  /verify-phone-number      <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
+  /sso-callback             <SignUpSSOCallback {...} />
+  /verify                   <SignUpEmailLinkFlowComplete {...} />
+  /continue
+    /verify-email-address   <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
+    /verify-phone-number    <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
+    /                       <SignUpContinue />
+  /                         <SignUpStart />
+  [ELSE]                    <RedirectToSignUp />
+
+/sign-up
+  /verify-email-address     <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
+  /verify-phone-number      <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
+  /sso-callback             <SignUpSSOCallback {...} />
+  /verify                   <SignUpEmailLinkFlowComplete {...} />
+  /continue
+    /                       <SignUpContinue />
+  /                         <SignUpStart />
+  [ELSE]                    <RedirectToSignUp />
+```
diff --git a/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx b/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,19 +1,10 @@
 'use client';
 
 import { GlobalError, Submit } from '@clerk/elements/common';
-import {
-  Continue,
-  Factor,
-  SignIn,
-  SocialProvider,
-  SocialProviderIcon,
-  Start,
-  Verification,
-} from '@clerk/elements/sign-in';
-
-import { H1, H2, H3, HR as Hr, P } from '@/components/design';
+import { SignIn, SocialProvider, SocialProviderIcon, Start, Verification, Verify } from '@clerk/elements/sign-in';
+
+import { H1, H3, HR as Hr, P } from '@/components/design';
 import { CustomField, CustomSubmit } from '@/components/form';
-import { SignInDebug } from '@/components/sign-in-debug';
 
 export default function SignInPage() {
   return (
@@ -71,13 +62,11 @@ export default function SignInPage() {
           </div>
         </Start>
 
-        <Continue>
+        <Verify>
           <div className='flex gap-6 flex-col'>
-            <H1>STRATEGIES (FIRST/SECOND FACTOR)</H1>
+            <H1>VERFIY</H1>
 
-            <H2>
-              Current Factor: <Factor first>First</Factor> | <Factor second>Second</Factor>
-            </H2>
+            <GlobalError className='block text-red-400 font-mono' />
 
             <Verification name='password'>
               <CustomField
@@ -118,10 +107,10 @@ export default function SignInPage() {
               </Submit>
             </Verification>
           </div>
-        </Continue>
+        </Verify>
       </div>
 
-      <SignInDebug />
+      {/* <SignInDebug /> */}
     </SignIn>
   );
 }
diff --git a/packages/elements/examples/nextjs/app/sign-up/[[...sign-up]]/page.tsx b/packages/elements/examples/nextjs/app/sign-up/[[...sign-up]]/page.tsx
@@ -13,15 +13,14 @@ import {
 
 import { H1, HR as Hr } from '@/components/design';
 import { CustomField, CustomSubmit } from '@/components/form';
-import { SignUpDebug } from '@/components/sign-up-debug';
 
 export default function SignUpPage() {
   return (
     <SignUp>
       <div className='m-auto w-max text-sm'>
         <Start>
           <div className='flex flex-col items-center justify-center gap-12'>
-            <H1>SIGN UP - START</H1>
+            <H1>Sign Up</H1>
 
             <div className='flex flex-col items-stretch justify-center gap-2'>
               <SocialProvider
@@ -58,47 +57,33 @@ export default function SignUpPage() {
                 label='Email'
                 name='emailAddress'
               />
+
               <CustomField
                 label='Password'
                 name='password'
               />
-
               <CustomSubmit>Sign Up</CustomSubmit>
             </div>
           </div>
         </Start>
 
         <Continue>
-          <div className='flex flex-col items-center justify-center gap-12'>
-            <H1>SIGN UP - CONTINUE</H1>
+          <H1>Please enter additional information:</H1>
 
-            <GlobalError className='block text-red-400 font-mono' />
+          <GlobalError className='block text-red-400 font-mono' />
 
-            <div className='flex gap-6 flex-col'>
-              <CustomField
-                label='First Name'
-                name='firstName'
-              />
-              <CustomField
-                label='Last Name'
-                name='lastName'
-              />
-              <CustomField
-                label='Username'
-                name='username'
-              />
-              <CustomField
-                label='Phone'
-                name='phoneNumber'
-              />
+          <CustomField
+            label='Phone Number'
+            name='phoneNumber'
+          />
 
-              <CustomSubmit>Submit</CustomSubmit>
-            </div>
-          </div>
+          <CustomSubmit>Sign Up</CustomSubmit>
         </Continue>
 
         <Verify>
-          <H1>SIGN UP - VERIFY</H1>
+          <H1>Verify your information:</H1>
+
+          <GlobalError className='block text-red-400 font-mono' />
 
           <Verification name='code'>
             <CustomField
@@ -113,7 +98,7 @@ export default function SignUpPage() {
         </Verify>
       </div>
 
-      <SignUpDebug />
+      {/* <SignUpDebug /> */}
     </SignUp>
   );
 }
diff --git a/packages/elements/examples/nextjs/next.config.js b/packages/elements/examples/nextjs/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  // Disable React strict mode when using the state machine inspector
+  reactStrictMode: process.env['NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG'] !== 'true',
+};
 
 module.exports = nextConfig;
diff --git a/packages/elements/examples/nextjs/package.json b/packages/elements/examples/nextjs/package.json
@@ -15,7 +15,7 @@
     "@radix-ui/react-form": "^0.0.3",
     "clsx": "^2.0.0",
     "framer-motion": "^11.0.2",
-    "next": "^14.1.0",
+    "next": "~14.0.0",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",

diff --git a/packages/elements/src/internals/constants/index.ts b/packages/elements/src/internals/constants/index.ts
@@ -1,2 +1,5 @@
 export const SSO_CALLBACK_PATH_ROUTE = '/sso-callback';
 export const MAGIC_LINK_VERIFY_PATH_ROUTE = '/verify';
+
+export const SIGN_IN_DEFAULT_BASE_PATH = '/sign-in';
+export const SIGN_UP_DEFAULT_BASE_PATH = '/sign-up';
diff --git a/...es/elements/src/internals/errors/error.ts → ...es/elements/src/internals/errors/index.ts b/...es/elements/src/internals/errors/error.ts → ...es/elements/src/internals/errors/index.ts
diff --git a/packages/elements/src/internals/machines/form/form.machine.ts b/packages/elements/src/internals/machines/form/form.machine.ts
@@ -3,7 +3,7 @@ import { isClerkAPIResponseError } from '@clerk/shared/error';
 import type { MachineContext } from 'xstate';
 import { assign, enqueueActions, setup } from 'xstate';
 
-import { ClerkElementsError, ClerkElementsFieldError } from '~/internals/errors/error';
+import { ClerkElementsError, ClerkElementsFieldError } from '~/internals/errors';
 
 import type { FieldDetails, FormFields } from './form.types';
 
@@ -69,8 +69,7 @@ export const FormMachine = setup({
           const fields: Record<string, ClerkElementsFieldError[]> = {};
           const globalErrors: ClerkElementsError[] = [];
 
-          for (const error of event.error.errors) {
-            // TODO: Why are we sending in snake and receiving camel?
+          for (const error of event.error.errors || [event.error]) {
             const name = snakeToCamel(error.meta?.paramName);
 
             if (!name) {

diff --git a/packages/elements/src/internals/machines/form/form.types.ts b/packages/elements/src/internals/machines/form/form.types.ts
@@ -1,4 +1,4 @@
-import type { ClerkElementsFieldError } from '~/internals/errors/error';
+import type { ClerkElementsFieldError } from '~/internals/errors';
 
 export type FieldDetails = {
   name?: string;

diff --git a/packages/elements/src/internals/machines/shared.actors.ts b/packages/elements/src/internals/machines/shared.actors.ts
@@ -2,9 +2,10 @@ import type { Clerk, HandleOAuthCallbackParams, HandleSamlCallbackParams, Loaded
 import type { AnyEventObject, EventObject } from 'xstate';
 import { fromCallback, fromPromise } from 'xstate';
 
-import { ClerkElementsRuntimeError } from '~/internals/errors/error';
+import { ClerkElementsRuntimeError } from '~/internals/errors';
 import { ClerkJSNavigationEvent, isClerkJSNavigationEvent } from '~/internals/machines/utils/clerkjs';
 
+// TODO: Remove
 /** @deprecated Use clerkLoader instead */
 export const waitForClerk = fromPromise<LoadedClerk, Clerk | LoadedClerk>(({ input: clerk }) => {
   return new Promise((resolve, reject) => {
@@ -43,6 +44,7 @@ export type HandleRedirectCallbackParams<T = Required<HandleOAuthCallbackParams
 
 export type HandleRedirectCallbackInput = LoadedClerk;
 
+// TODO: Remove
 /**
  * This function hijacks handleRedirectCallback from ClerkJS to handle navigation events
  * from the state machine.

diff --git a/packages/elements/src/internals/machines/sign-in/machines/index.ts b/packages/elements/src/internals/machines/sign-in/machines/index.ts
@@ -0,0 +1,12 @@
+export {
+  SignInFirstFactorMachine,
+  SignInFirstFactorMachineId,
+  SignInSecondFactorMachine,
+  SignInSecondFactorMachineId,
+} from './verification.machine';
+export { SignInRouterMachine, SignInRouterMachineId } from './router.machine';
+export { SignInStartMachine, SignInStartMachineId } from './start.machine';
+
+export type { TSignInRouterMachine } from './router.machine';
+export type { TSignInStartMachine } from './start.machine';
+export type { TSignInFirstFactorMachine, TSignInSecondFactorMachine } from './verification.machine';