Skip to content

Commit

Permalink
working build without typecheck issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@moe-dev
moe-dev committed Nov 11, 2024
1 parent 4706a29 commit 8434570
Show file tree
Hide file tree
Showing 15 changed files with 235 additions and 224 deletions.
2 changes: 1 addition & 1 deletion examples/react-components/src/app/Switch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const CustomSwitch = styled(Switch)(({ theme }) => ({
margin: 2,
},
"& .MuiSwitch-switchBase.Mui-checked": {
color: "var(--Greyscale-900, #2B2F33)",
color: "var(--Greyscale-900, #2B2F33)",
},
"& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
backgroundColor: "var(--Greyscale-900, #2B2F33)",
Expand Down
6 changes: 3 additions & 3 deletions ...react-components/src/app/index.module.css → examples/react-components/src/app/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
display: flex;
margin-left: 16px;
padding-left: 16px;
padding-top:4px;
padding-top: 4px;
padding-bottom: 4px;
justify-content: space-between;
align-items: center;
Expand Down Expand Up @@ -127,10 +127,10 @@
height: 18px;
}

.socialContainer{
.socialContainer {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 8px 16px;
padding-bottom: 16px;
background-color: #ffffff;
}
}
132 changes: 60 additions & 72 deletions examples/react-components/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
"use client";

import styles from "./index.module.css";
import * as React from "react";
import { useState } from "react";
import { useTurnkey, Auth } from "@turnkey/sdk-react";
import { Switch, Typography } from "@mui/material";
import { Typography } from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import AppsIcon from "@mui/icons-material/Apps";
import CustomSwitch from "./Switch";
import "./index.css";

// Define types for config and socials
interface SocialConfig {
Expand All @@ -24,16 +23,7 @@ interface Config {
socials: SocialConfig;
}

interface AuthPageProps {
turnkeyClientConfig: {
apiBaseUrl: string;
defaultOrganizationId: string;
apiPublicKey: string;
apiPrivateKey: string;
};
}

export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
export default function AuthPage() {
const { authIframeClient } = useTurnkey();
const [orgData, setOrgData] = useState<any>();

Expand Down Expand Up @@ -120,17 +110,17 @@ export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
};

return (
<main className={styles.main}>
<main className="main">
{!orgData && (
<div className={styles.authConfigCard}>
<Typography variant="h6" className={styles.configTitle}>
<div className="authConfigCard">
<Typography variant="h6" className="configTitle">
Authentication config
</Typography>

<div className={styles.toggleContainer}>
<div className={styles.toggleRow}>
<div className={styles.labelContainer}>
<img src="/dots.svg"/>
<div className="toggleContainer">
<div className="toggleRow">
<div className="labelContainer">
<img src="/dots.svg" />
<Typography>Email</Typography>
</div>
<CustomSwitch
Expand All @@ -139,9 +129,9 @@ export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
/>
</div>

<div className={styles.toggleRow}>
<div className={styles.labelContainer}>
<img src="/dots.svg"/>
<div className="toggleRow">
<div className="labelContainer">
<img src="/dots.svg" />
<Typography>Passkey</Typography>
</div>
<CustomSwitch
Expand All @@ -150,74 +140,72 @@ export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
/>
</div>

<div className={styles.toggleRow}>
<div className={styles.labelContainer}>
<img src="/dots.svg"/>
<div className="toggleRow">
<div className="labelContainer">
<img src="/dots.svg" />
<Typography>Phone</Typography>
</div>
<CustomSwitch
checked={config.phone}
onChange={() => toggleConfig("phone")}
/>
</div>
<div className = {styles.socialContainer}>
<div className={styles.toggleSocialRow}>
<div className={styles.labelContainer}>
<img src="/dots.svg"/>
<Typography>Socials</Typography>
</div>
<CustomSwitch
checked={config.socials.enabled}
onChange={() => toggleSocials("enabled")}
/>


</div>
<div className={styles.toggleSocialIndividualRow}>
<div className={styles.labelContainer}>
<img src="/google.svg" className = {styles.iconSmall}/>
<Typography>Google</Typography>
</div>
<CustomSwitch
checked={config.socials.google}
onChange={() => toggleSocials("google")}
/>
</div>
<div className={styles.toggleSocialIndividualRow}>
<div className={styles.labelContainer}>
<img src="/apple.svg" className = {styles.iconSmall}/>
<Typography>Apple</Typography>
</div>
<CustomSwitch
checked={config.socials.apple}
onChange={() => toggleSocials("apple")}
/>
<div className="socialContainer">
<div className="toggleSocialRow">
<div className="labelContainer">
<img src="/dots.svg" />
<Typography>Socials</Typography>
</div>
<div className={styles.toggleSocialIndividualRow}>
<div className={styles.labelContainer}>
<img src="/facebook.svg" className = {styles.iconSmall}/>
<Typography>Facebook</Typography>
</div>
<CustomSwitch
checked={config.socials.facebook}
onChange={() => toggleSocials("facebook")}
/>
<CustomSwitch
checked={config.socials.enabled}
onChange={() => toggleSocials("enabled")}
/>
</div>
<div className="toggleSocialIndividualRow">
<div className="labelContainer">
<img src="/google.svg" className="iconSmall" />
<Typography>Google</Typography>
</div>
<CustomSwitch
checked={config.socials.google}
onChange={() => toggleSocials("google")}
/>
</div>
<div className="toggleSocialIndividualRow">
<div className="labelContainer">
<img src="/apple.svg" className="iconSmall" />
<Typography>Apple</Typography>
</div>
<CustomSwitch
checked={config.socials.apple}
onChange={() => toggleSocials("apple")}
/>
</div>
<div className="toggleSocialIndividualRow">
<div className="labelContainer">
<img src="/facebook.svg" className="iconSmall" />
<Typography>Facebook</Typography>
</div>
<CustomSwitch
checked={config.socials.facebook}
onChange={() => toggleSocials("facebook")}
/>
</div>
</div>
</div>

<div className={styles.copyConfigButton} onClick={handleCopyConfig}>
<div className="copyConfigButton" onClick={handleCopyConfig}>
<ContentCopyIcon fontSize="small" />
<div className={styles.copyConfigText}>
<Typography variant="body2" className={styles.copyText}>
<div className="copyConfigText">
<Typography variant="body2" className="copyText">
Copy config
</Typography>
</div>
</div>
</div>
)}
{orgData ? (
<div className={styles.success}>
<div className="success">
YOU ARE AUTHENTICATED ON TURNKEY!
<div>
<strong>Organization Id:</strong> {orgData.organizationId}
Expand All @@ -233,7 +221,7 @@ export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
</div>
</div>
) : (
<div className={styles.authComponent}>
<div className="authComponent">
<Auth
authConfig={authConfig}
onHandleAuthSuccess={handleAuthSuccess}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"rollup-plugin-postcss": "^4.0.2",
"rollup-preserve-directives": "^1.1.2",
"@rollup/plugin-alias": "5.1.1",
"@rollup/plugin-url":"8.0.2",
"@rollup/plugin-url": "8.0.2",
"tsx": "^3.12.7",
"typescript": "^5.1.4"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/sdk-react/src/components/auth/Apple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const AppleAuthButton: React.FC<AppleAuthButtonProps> = ({
responseMode="fragment"
render={({ onClick }) => (
<div onClick={onClick} className={styles.socialButton}>
<img {...appleIcon} className = {styles.iconSmall}/>
<img src={appleIcon} className={styles.iconSmall} />
<span>Continue with Apple</span>
</div>
)}
Expand Down
7 changes: 3 additions & 4 deletions packages/sdk-react/src/components/auth/Auth.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ button:disabled {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
gap: 8px;
margin: 16px 0;
}

Expand All @@ -288,7 +288,7 @@ button:disabled {
margin-top: 16px;
width: 95%;
margin-left: auto;
margin-right: auto;
margin-right: auto;
margin-bottom: 32px;
}

Expand All @@ -301,9 +301,8 @@ button:disabled {
padding-right: 8px;
}


.noPasskeyLink {
color: var(--Blue-500, #4C48FF);
color: var(--Blue-500, #4c48ff);
font-size: 0.9rem;
margin-top: 8px;
cursor: pointer;
Expand Down
Loading

0 comments on commit 8434570

Please sign in to comment.