feat!: remove emotion (#624)

* feat\!: remove emotion dependency from most recipes * feat: removed last react-phone-number-input references + centralised import of utils * test: update jest + move all unit tests to jest * feat: self-review fixes * chore: update PR template * test: updated tsc version in with-typescript to match version root * fix: remove left-over references to the old palette object * chore: update size-limits * docs: updated example styles * refactor: rebuild + updated css variables for consistency * chore: update changelog * fix: minor fixes in phone number input * build: updated start scripts to finish build before starting test apps * chore: update changelog * build: remove checkTranslationKeys * Revert "build: remove checkTranslationKeys" This reverts commit 223faf1. * build: re-implement checkTranslationKeys * feat\!: moved web-js+website to peer-dep + fixed lint dep * fix: added workaround for phone input lib incompatibility w/ shadow dom * fix: correctly guess country when changing to phone input from emailOrPhone * build: update website version * build: revert to branch-based website peer dep for manual testing * refactor: updated to new web-js version + removed website references&dep * fix: dependency version + phone number input UX improvement * refactor: removed unused styles/selectors + visual test improvements * fix: make phone input country dropdown closer to old version * refactor: cleanup, update version number and FDI * fix: revert FDI update * fix: fix general error clearing too fast in phone forms * chore: update web-js dependency to point to version branch * chore: update version number * chore: fix branch name in dependency * chore: reduce size limit
supertokens · Jan 20, 2023 · 1361483 · 1361483
1 parent bf43162
commit 1361483
Show file tree

Hide file tree

Showing 433 changed files with 38,711 additions and 37,318 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,6 @@
 {
     "presets": [["@babel/preset-env", {}, "@babel/preset-react"]],
     "plugins": [
-        "@emotion/babel-plugin",
-        "inline-react-svg",
         [
             "@babel/plugin-transform-react-jsx",
             {

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -30,6 +30,7 @@
     -   If no such branch exists, then create one from the latest released branch.
 -   [ ] If added a new recipe interface, then make sure that the implementation of it uses NON arrow functions only (like `someFunc: function () {..}`).
 -   [ ] If I added a new recipe, I also added the recipe entry point into the `size-limit` section of `package.json` with the size limit set to the current size rounded up.
+-   [ ] If I added a new recipe, I also added the recipe entry point into the `rollup.config.mjs`
 
 ## Remaining TODOs for this PR
 

diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,4 @@ screenshot.jpeg
 /eslint/node_modules
 /test_report/
 supertokens-auth-react-*.tgz
+stats.html
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,127 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.30.0] - 2023-01-20
+
+### Changes
+
+-   Updated many dependencies to fix warnings during install
+-   Updated our build process to use rollup as a bundler
+
+### Breaking changes
+
+-   Removed dependency on emotion/chroma
+-   Updated to styling through plain CSS instead of objects/emotion. Check https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/styling/changing-style for more info
+-   Removed palette option, colors are now customizable through setting CSS variables in styles. Check https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/styling/changing-colours for more info
+-   Moved `supertokens-web-js` into `devDependencies`. If using npm version 6, you also need to install it with `npm i --save supertokens-web-js`. Later versions install it automatically.
+
+### Migration
+
+#### Custom styles
+
+Before:
+
+```tsx
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "...",
+    },
+    recipeList: [
+        ThirdPartyEmailPassword.init({
+            style: {
+                container: {
+                    fontFamily: "cursive",
+                },
+            },
+        }),
+        Session.init(),
+    ],
+});
+```
+
+After:
+
+```tsx
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "...",
+    },
+    recipeList: [
+        ThirdPartyEmailPassword.init({
+            style: `
+                [data-supertokens~=container] {
+                    font-family: cursive;
+                }
+            `,
+        }),
+        Session.init(),
+    ],
+});
+```
+
+#### Custom palette
+
+Before:
+
+```tsx
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "...",
+    },
+    recipeList: [
+        ThirdPartyEmailPassword.init({
+            palette: {
+                background: "#333",
+                inputBackground: "#292929",
+                textTitle: "white",
+                textLabel: "white",
+                textPrimary: "white",
+                error: "#ad2e2e",
+                textInput: "#a9a9a9",
+                textLink: "#a9a9a9",
+            },
+        }),
+        Session.init(),
+    ],
+});
+```
+
+After:
+
+```tsx
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "...",
+    },
+    recipeList: [
+        ThirdPartyEmailPassword.init({
+            style: `
+                [data-supertokens~=container] {
+                    --palette-background: 51, 51, 51;
+                    --palette-inputBackground: 41, 41, 41;
+                    --palette-inputBorder: 41, 41, 41;
+                    --palette-textTitle: 255, 255, 255;
+                    --palette-textLabel: 255, 255, 255;
+                    --palette-textPrimary: 255, 255, 255;
+                    --palette-error: 173, 46, 46;
+                    --palette-textInput: 169, 169, 169;
+                    --palette-textLink: 169, 169, 169;
+                }
+            `,
+        }),
+        Session.init(),
+    ],
+});
+```
+
 ## [0.29.0] - 2023-01-06
 
 ### Breaking changes

diff --git a/examples/for-tests-react-16/src/App.js b/examples/for-tests-react-16/src/App.js
@@ -489,10 +489,10 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
     return EmailVerification.init({
         disableDefaultUI,
         sendVerifyEmailScreen: {
-            style: theme.style,
+            style: theme,
         },
         verifyEmailLinkClickedScreen: {
-            style: theme.style,
+            style: theme,
         },
         mode: emailVerificationMode,
         getRedirectionURL: async (context) => {
@@ -542,11 +542,11 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
 
 function getEmailPasswordConfigs({ disableDefaultUI }) {
     return EmailPassword.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS EMAIL_PASSWORD OVERRIDE`);
@@ -576,7 +576,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS EMAIL_PASSWORD PRE_API_HOOKS ${context.action}`);
             return context;
@@ -619,11 +618,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
 
 function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdPartyPasswordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS THIRDPARTYPASSWORDLESS OVERRIDE`);
@@ -685,7 +679,6 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS THIRDPARTYPASSWORDLESS PRE_API_HOOKS ${context.action}`);
             return context;
@@ -706,11 +699,11 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
         signInUpFeature: {
             disableDefaultUI,
             style: theme.style,
-            thirdPartyProviderAndEmailOrPhoneFormStyle: {
-                providerCustom: {
-                    color: "red",
+            thirdPartyProviderAndEmailOrPhoneFormStyle: `
+                [data-supertokens~=providerCustom] {
+                    color: red;
                 },
-            },
+            `,
             privacyPolicyLink: "https://supertokens.io/legal/privacy-policy",
             termsOfServiceLink: "https://supertokens.io/legal/terms-and-conditions",
             providers: [
@@ -743,11 +736,6 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
 
 function getPasswordlessConfigs({ disableDefaultUI }) {
     return Passwordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS PASSWORDLESS OVERRIDE`);
@@ -789,7 +777,6 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS PASSWORDLESS PRE_API_HOOKS ${context.action}`);
             return context;
@@ -827,11 +814,12 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
 
 function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdParty.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
+
         preAPIHook: async (context) => {
             console.log(`ST_LOGS THIRD_PARTY PRE_API_HOOKS ${context.action}`);
             return context;
@@ -876,7 +864,6 @@ function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
             },
         },
         useShadowDom,
-        palette: theme.colors,
         signInAndUpFeature: {
             disableDefaultUI,
             style: theme.style,
@@ -1057,7 +1044,6 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
             },
         },
         useShadowDom,
-        palette: theme.colors,
         resetPasswordUsingTokenFeature: {
             disableDefaultUI,
         },

diff --git a/examples/for-tests-react-16/src/Themes/Dark.js b/examples/for-tests-react-16/src/Themes/Dark.js
@@ -1,14 +1,15 @@
-const DarkTheme = {
-    colors: {
-        background: "#333",
-        inputBackground: "#292929",
-        textTitle: "white",
-        textLabel: "white",
-        textPrimary: "white",
-        error: "#ad2e2e",
-        textInput: "#a9a9a9",
-        textLink: "#a9a9a9",
-    },
-};
+const DarkTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 51, 51, 51;
+        --palette-inputBackground: 41, 41, 41;
+        --palette-inputBorder: 41, 41, 41;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 255, 255, 255;
+        --palette-textPrimary: 255, 255, 255;
+        --palette-error: 173, 46, 46;
+        --palette-textInput: 169, 169, 169;
+        --palette-textLink: 169, 169, 169;
+    }
+`;
 
 export default DarkTheme;