fix: type fixes and design updates + extended storybook

supertokens · Dec 7, 2023 · 24dbe36 · 24dbe36
1 parent cfc414e
commit 24dbe36
Show file tree

Hide file tree

Showing 31 changed files with 1,136 additions and 877 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
         "@storybook/addon-actions",
         "@storybook/addon-links",
         "@storybook/addon-interactions",
+        "@storybook/addon-designs",
         // "@storybook/addon-actions/register",
     ],
     framework: {

diff --git a/lib/build/emailverification-shared.js b/lib/build/emailverification-shared.js
diff --git a/lib/build/emailverification-shared2.js b/lib/build/emailverification-shared2.js
diff --git a/lib/build/index2.js b/lib/build/index2.js
diff --git a/lib/build/multifactorauthprebuiltui.js b/lib/build/multifactorauthprebuiltui.js
diff --git a/lib/build/passwordless-shared4.js b/lib/build/passwordless-shared4.js
diff --git a/lib/build/recipe/emailverification/recipe.d.ts b/lib/build/recipe/emailverification/recipe.d.ts
diff --git a/lib/build/sessionprebuiltui.js b/lib/build/sessionprebuiltui.js
diff --git a/lib/build/thirdparty-shared2.js b/lib/build/thirdparty-shared2.js
diff --git a/lib/build/thirdpartyemailpasswordprebuiltui.js b/lib/build/thirdpartyemailpasswordprebuiltui.js
diff --git a/lib/build/thirdpartypasswordlessprebuiltui.js b/lib/build/thirdpartypasswordlessprebuiltui.js
diff --git a/lib/build/totpprebuiltui.js b/lib/build/totpprebuiltui.js
diff --git a/lib/build/ui/types.d.ts b/lib/build/ui/types.d.ts
diff --git a/lib/ts/recipe/emailpassword/components/themes/styles.css b/lib/ts/recipe/emailpassword/components/themes/styles.css
@@ -137,7 +137,7 @@
     display: flex;
     flex-direction: column;
     padding-top: 0px;
-    padding-bottom: 34px;
+    padding-bottom: 20px;
 }
 
 [data-supertokens~="formRow"][data-supertokens~="hasError"] {

diff --git a/lib/ts/recipe/emailverification/recipe.tsx b/lib/ts/recipe/emailverification/recipe.tsx
@@ -23,6 +23,7 @@ import { PostSuperTokensInitCallbacks } from "supertokens-web-js/utils/postSuper
 import { SessionClaimValidatorStore } from "supertokens-web-js/utils/sessionClaimValidatorStore";
 
 import { SSR_ERROR } from "../../constants";
+import { isTest } from "../../utils";
 import RecipeModule from "../recipeModule";
 
 import { DEFAULT_VERIFY_EMAIL_PATH } from "./constants";
@@ -137,4 +138,13 @@ export default class EmailVerification extends RecipeModule<
             return "/";
         }
     };
+
+    static reset(): void {
+        if (!isTest()) {
+            return;
+        }
+
+        EmailVerification.instance = undefined;
+        return;
+    }
 }
diff --git a/lib/ts/recipe/thirdpartyemailpassword/components/themes/styles.css b/lib/ts/recipe/thirdpartyemailpassword/components/themes/styles.css
@@ -20,12 +20,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     color: rgb(var(--palette-textPrimary));
 }
 
 [data-supertokens~="thirdPartyEmailPasswordDividerOr"] {
     flex: 1 1;
-    margin-top: 0.75em;
 }
 
 [data-supertokens~="divider"] {

diff --git a/lib/ts/recipe/thirdpartypasswordless/components/themes/styles.css b/lib/ts/recipe/thirdpartypasswordless/components/themes/styles.css
@@ -20,12 +20,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     color: rgb(var(--palette-textPrimary));
 }
 
 [data-supertokens~="thirdPartyPasswordlessDividerText"] {
     flex: 1 1;
-    margin-top: 0.75em;
 }
 
 [data-supertokens~="divider"] {

diff --git a/lib/ts/recipe/totp/components/themes/styles.css b/lib/ts/recipe/totp/components/themes/styles.css
@@ -29,7 +29,7 @@
     display: block;
     color: rgb(var(--palette-textGray));
     font-size: var(--font-size-0);
-    margin: 4px;
+    margin: 16px 0 12px;
 }
 
 [data-supertokens~="totpSecret"] {
@@ -41,6 +41,8 @@
     font-weight: 600;
     letter-spacing: 3.36px;
     background: rgba(var(--palette-textLink), 0.08);
+    word-wrap: break-word;
+    overflow-y: hidden;
 }
 
 [data-supertokens~="showTOTPSecretBtn"]:hover {

diff --git a/lib/ts/styles/styles.css b/lib/ts/styles/styles.css
@@ -79,7 +79,7 @@
 
 [data-supertokens~="superTokensBranding"] {
     display: block;
-    margin: 0 auto;
+    margin: 10px auto 0;
     background: rgb(var(--palette-superTokensBrandingBackground));
     color: rgb(var(--palette-superTokensBrandingText));
     text-decoration: none;
@@ -95,7 +95,8 @@
     background: rgb(var(--palette-errorBackground));
     padding-top: 10px;
     padding-bottom: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
+    margin-top: 24px;
     padding-left: 18px;
     padding-right: 18px;
     letter-spacing: 0.2px;
@@ -160,9 +161,13 @@
     color: rgb(var(--palette-textPrimary));
 }
 
+[data-supertokens~="secondaryText"] strong {
+    font-weight: 500;
+}
+
 [data-supertokens~="divider"] {
-    margin-top: 1em;
-    margin-bottom: 1em;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
     border-bottom: 0.3px solid #dddddd;
     align-items: center;
     padding-bottom: 5px;

diff --git a/lib/ts/ui/types.ts b/lib/ts/ui/types.ts
@@ -1,5 +1,6 @@
 import type { EmailPasswordPreBuiltUI } from "../recipe/emailpassword/prebuiltui";
 import type { EmailVerificationPreBuiltUI } from "../recipe/emailverification/prebuiltui";
+import type { MultiFactorAuthPreBuiltUI } from "../recipe/multifactorauth/prebuiltui";
 import type { PasswordlessPreBuiltUI } from "../recipe/passwordless/prebuiltui";
 import type { ThirdPartyPreBuiltUI } from "../recipe/thirdparty/prebuiltui";
 import type { ThirdPartyEmailPasswordPreBuiltUI } from "../recipe/thirdpartyemailpassword/prebuiltui";
@@ -18,4 +19,5 @@ export type PreBuiltRecipes = (
     | typeof EmailPasswordPreBuiltUI
     | typeof PasswordlessPreBuiltUI
     | typeof EmailVerificationPreBuiltUI
+    | typeof MultiFactorAuthPreBuiltUI
 )[];