@wecodesolutions/shared-react-components-ts 0.5.1 → 0.5.3

package/src/components/buttons/SignInWithGoogle/SignInWithGoogle.module.css

@@ -0,0 +1,106 @@
+.gsiMaterialButton {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -webkit-appearance: none;
+  background-color: WHITE;
+  background-image: none;
+  border: 1px solid #747775;
+  -webkit-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #1f1f1f;
+  cursor: pointer;
+  font-family: 'Roboto', arial, sans-serif;
+  font-size: 14px;
+  height: 40px;
+  letter-spacing: 0.25px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background-color 0.218s, border-color 0.218s,
+    box-shadow 0.218s;
+  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  max-width: 400px;
+  min-width: min-content;
+}
+
+.gsiMaterialButtonIcon {
+  height: 20px;
+  margin-right: 12px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.gsiMaterialButtonContentWrapper {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+}
+
+.gsiMaterialButtonContents {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  font-family: 'Roboto', arial, sans-serif;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.gsiMaterialButtonState {
+  -webkit-transition: opacity 0.218s;
+  transition: opacity 0.218s;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.gsiMaterialButton:disabled {
+  cursor: default;
+  background-color: #ffffff61;
+  border-color: #1f1f1f1f;
+}
+
+.gsiMaterialButton:disabled .gsiMaterialButtonContents {
+  opacity: 38%;
+}
+
+.gsiMaterialButton:disabled .gsiMaterialButtonIcon {
+  opacity: 38%;
+}
+
+.gsiMaterialButton:not(:disabled):active .gsiMaterialButtonState,
+.gsiMaterialButton:not(:disabled):focus .gsiMaterialButtonState {
+  background-color: #303030;
+  opacity: 12%;
+}
+
+.gsiMaterialButton:not(:disabled):hover {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+    0 1px 3px 1px rgba(60, 64, 67, 0.15);
+}
+
+.gsiMaterialButton:not(:disabled):hover .gsiMaterialButtonState {
+  background-color: #303030;
+  opacity: 8%;
+}

package/src/components/buttons/SignInWithGoogle/SignInWithGoogle.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styles from "./SignInWithGoogle.module.css";
+import { Auth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+
+interface SignInWithGoogleProps {
+    auth: Auth
+}
+
+export const SignInWithGoogle: React.FC<SignInWithGoogleProps> = ({ auth }) => {
+
+    function googleLogin(auth: Auth) {
+        const provider = new GoogleAuthProvider();
+        signInWithPopup(auth, provider).then(async (result) => {
+            console.log(result);
+        });
+    }
+
+    return (
+        <button
+            className={styles.gsiMaterialButton}
+            onClick={(event) => {
+                event.preventDefault(); // Prevent form submission
+                googleLogin(auth);
+            }}>
+            <div className={styles.gsiMaterialButtonState}></div>
+            <div className={styles.gsiMaterialButtonContentWrapper}>
+                <div className={styles.gsiMaterialButtonIcon}>
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlnsXlink="http://www.w3.org/1999/xlink" style={{ display: "block" }}>
+                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                        <path fill="none" d="M0 0h48v48H0z"></path>
+                    </svg>
+                </div>
+                <span className={styles.gsiMaterialButtonContents}>Continue with Google</span>
+                <span style={{ display: "none" }}>Continue with Google</span>
+            </div>
+        </button>
+    );
+};

package/src/index.tsx

@@ -1,7 +1,7 @@
 export * from './components/buttons/button/Button';
 export * from './components/buttons/circleButton/CircleButton';
-export * from './components/buttons/googleLoginComponent/GoogleLoginComponent';
 export * from './components/buttons/roundButton/RoundButton';
+export * from './components/buttons/SignInWithGoogle/SignInWithGoogle';
 export * from './components/formContainer/FormContainer';
 export * from './components/icons/AllCustomIcons';
 export * from './components/inputField/InputField';

package/dist/components/buttons/googleLoginComponent/GoogleLoginComponent.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { GoogleLoginResponse, GoogleLoginResponseOffline } from "react-google-login";
-interface GoogleLoginComponentProps {
-    clientId?: string;
-    buttonText?: string;
-    onSuccess?: (response: GoogleLoginResponse | GoogleLoginResponseOffline) => void;
-    onFailure?: (error: any) => void;
-}
-export declare const GoogleLoginComponent: React.FC<GoogleLoginComponentProps>;
-export {};

package/src/components/buttons/googleLoginComponent/GoogleLoginComponent.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { GoogleLogin, GoogleLoginResponse, GoogleLoginResponseOffline } from "react-google-login";
-
-
-interface GoogleLoginComponentProps {
-    clientId?: string;
-    buttonText?: string;
-    onSuccess?: (response: GoogleLoginResponse | GoogleLoginResponseOffline) => void;
-    onFailure?: (error: any) => void;
-}
-
-export const GoogleLoginComponent: React.FC<GoogleLoginComponentProps> = ({
-    clientId = "YOUR_GOOGLE_CLIENT_ID", // Default clientId
-    buttonText = "Continue with Google", // Default button text
-    onSuccess = (response) => console.log("Login Success!", response), // Default onSuccess handler
-    onFailure = (error) => console.error("Login Failed!", error), // Default onFailure handler
-}) => {
-
-
-    return (
-        <div>
-            <GoogleLogin
-                clientId={clientId}
-                buttonText={buttonText}
-                onSuccess={onSuccess}
-                onFailure={onFailure}
-                cookiePolicy={"single_host_origin"}
-                style={{ marginTop: "100px" }}
-            />
-        </div>
-    );
-};