@siratik/wp-component-library 0.1.1 → 0.1.2

package/components/captcha-placeholder/CloudflareTurnstile.js

@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * External dependencies
+ */
+import styled from "@emotion/styled";
+
+/**
+ * Internal dependencies
+ */
+import { CaptchaContainer, InvisibleNotice } from "./styles";
+
+const Turnstile = styled.div`
+	display: inline-flex;
+	align-items: center;
+	background: ${props => {
+		if (props.theme === 'dark') { return '#1f1f1f'; }
+		if (props.mode === 'non-interactive') { return '#f9fafb'; }
+		return 'white';
+	}};
+	border: 1px solid ${props => props.theme === 'dark' ? '#444' : '#ddd'};
+	color: ${props => props.theme === 'dark' ? '#fff' : 'inherit'};
+	border-radius: 8px;
+	padding: 12px 16px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	position: relative;
+	min-width: 300px;
+	cursor: not-allowed;
+
+	${props => props.theme === 'auto' && `
+		@media (prefers-color-scheme: dark) {
+			background: #1f1f1f;
+			border-color: #444;
+			color: #fff;
+		}
+	`}
+`;
+
+const TurnstileCheckbox = styled.div`
+	width: 24px;
+	height: 24px;
+	border: 2px solid #d1d5db;
+	border-radius: 4px;
+	margin-right: 12px;
+	background: white;
+`;
+
+const TurnstileLabel = styled.div`
+	flex: 1;
+	font-size: 14px;
+	color: ${props => props.theme === 'dark' ? '#fff' : '#374151'};
+`;
+
+const TurnstileSpinner = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+`;
+
+const TurnstileSpinnerInner = styled.div`
+	width: 24px;
+	height: 24px;
+	border: 3px solid #e5e7eb;
+	border-top-color: #f97316;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+
+	@keyframes spin {
+		to { transform: rotate(360deg); }
+	}
+`;
+
+const TurnstileLogo = styled.div`
+	font-size: 12px;
+	color: #f97316;
+	font-weight: 600;
+`;
+
+export function CloudflareTurnstile({ theme, mode }) {
+	if (mode === 'invisible') {
+		return (
+			<InvisibleNotice>
+				{__("Invisible captcha - runs automatically on form submission", "wp-component-library")}
+			</InvisibleNotice>
+		);
+	}
+
+	return (
+		<CaptchaContainer>
+			<Turnstile theme={theme} mode={mode}>
+				{mode === 'managed' && (
+					<>
+						<TurnstileCheckbox />
+						<TurnstileLabel theme={theme}>{__("Verify you are human", "wp-component-library")}</TurnstileLabel>
+					</>
+				)}
+				{mode === 'non-interactive' && (
+					<TurnstileSpinner>
+						<TurnstileSpinnerInner />
+						<TurnstileLabel theme={theme}>{__("Verifying…", "wp-component-library")}</TurnstileLabel>
+					</TurnstileSpinner>
+				)}
+				<TurnstileLogo>Cloudflare</TurnstileLogo>
+			</Turnstile>
+		</CaptchaContainer>
+	);
+}

package/components/captcha-placeholder/GoogleRecaptcha.js

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * External dependencies
+ */
+import styled from "@emotion/styled";
+
+/**
+ * Internal dependencies
+ */
+import { CaptchaContainer, CheckboxBorder, RECAPTCHA_LOGO_BASE64 } from "./styles";
+
+const RecaptchaV2 = styled.div`
+	display: inline-flex;
+	align-items: center;
+	background: ${props => props.theme === 'dark' ? '#222' : '#f9f9f9'};
+	border: 1px solid ${props => props.theme === 'dark' ? '#555' : '#d3d3d3'};
+	color: ${props => props.theme === 'dark' ? '#e8eaed' : 'inherit'};
+	border-radius: 3px;
+	padding: ${props => props.size === 'compact' ? '6px 8px' : '10px 12px'};
+	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+	font-family: Roboto, Arial, sans-serif;
+	position: relative;
+	cursor: not-allowed;
+	font-size: ${props => props.size === 'compact' ? '12px' : '14px'};
+`;
+
+const RecaptchaLabel = styled.div`
+	margin-right: 12px;
+	font-size: 14px;
+	color: #555;
+`;
+
+const RecaptchaLogo = styled.div`
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	img {
+		width: 32px;
+		height: 32px;
+	}
+`;
+
+const RecaptchaText = styled.div`
+	display: flex;
+	flex-direction: column;
+	font-size: 10px;
+	color: #555;
+	line-height: 1.2;
+
+	span {
+		font-weight: 500;
+	}
+
+	small {
+		color: #1a73e8;
+	}
+`;
+
+const RecaptchaV3Badge = styled.div`
+	display: inline-flex;
+	align-items: center;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	padding: 8px 12px;
+	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+	font-size: 9px;
+	color: #555;
+`;
+
+const RecaptchaV3Logo = styled.div`
+	margin-right: 8px;
+	
+	img {
+		width: 24px;
+		height: 24px;
+	}
+`;
+
+const RecaptchaV3Text = styled.div`
+	line-height: 1.2;
+
+	strong {
+		font-size: 10px;
+	}
+`;
+
+const RecaptchaV3Links = styled.div`
+	color: #1a73e8;
+	margin-top: 2px;
+`;
+
+export function GoogleRecaptchaV2({ theme, size }) {
+	return (
+		<CaptchaContainer>
+			<RecaptchaV2 theme={theme} size={size}>
+				<CheckboxBorder />
+				<RecaptchaLabel>{__("I'm not a robot", "wp-component-library")}</RecaptchaLabel>
+				<RecaptchaLogo>
+					<img src={RECAPTCHA_LOGO_BASE64} alt="reCAPTCHA" />
+					<RecaptchaText>
+						<span>reCAPTCHA</span>
+						<small>Privacy - Terms</small>
+					</RecaptchaText>
+				</RecaptchaLogo>
+			</RecaptchaV2>
+		</CaptchaContainer>
+	);
+}
+
+export function GoogleRecaptchaV3() {
+	return (
+		<CaptchaContainer>
+			<RecaptchaV3Badge>
+				<RecaptchaV3Logo>
+					<img src={RECAPTCHA_LOGO_BASE64} alt="reCAPTCHA" />
+				</RecaptchaV3Logo>
+				<RecaptchaV3Text>
+					protected by<br/>
+					<strong>reCAPTCHA</strong>
+					<RecaptchaV3Links>Privacy - Terms</RecaptchaV3Links>
+				</RecaptchaV3Text>
+			</RecaptchaV3Badge>
+		</CaptchaContainer>
+	);
+}

package/components/captcha-placeholder/HCaptcha.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * External dependencies
+ */
+import styled from "@emotion/styled";
+
+/**
+ * Internal dependencies
+ */
+import { CaptchaContainer } from "./styles";
+
+const HCaptchaWrapper = styled.div`
+	display: inline-flex;
+	align-items: center;
+	background: ${props => props.theme === 'dark' ? '#333' : '#fafafa'};
+	border: 1px solid ${props => props.theme === 'dark' ? '#555' : '#e0e0e0'};
+	color: ${props => props.theme === 'dark' ? '#fff' : 'inherit'};
+	border-radius: 4px;
+	padding: ${props => props.size === 'compact' ? '8px 10px' : '12px 14px'};
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	position: relative;
+	cursor: not-allowed;
+	font-size: ${props => props.size === 'compact' ? '13px' : '15px'};
+`;
+
+const HCaptchaCheckbox = styled.div`
+	width: 28px;
+	height: 28px;
+	border: 2px solid #0074bf;
+	border-radius: 4px;
+	margin-right: 12px;
+	background: white;
+	position: relative;
+`;
+
+const HCaptchaLabel = styled.div`
+	margin-right: 12px;
+	font-size: 15px;
+	color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
+`;
+
+const HCaptchaLogo = styled.div`
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`;
+
+const HCaptchaLogoSvg = styled.div`
+	width: 24px;
+	height: 24px;
+	background: #0074bf;
+	color: white;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	font-size: 16px;
+`;
+
+const HCaptchaText = styled.div`
+	display: flex;
+	flex-direction: column;
+	font-size: 10px;
+	color: #666;
+	line-height: 1.2;
+
+	span {
+		font-weight: 500;
+		color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
+	}
+
+	small {
+		color: #0074bf;
+	}
+`;
+
+export function HCaptcha({ theme, size }) {
+	return (
+		<CaptchaContainer>
+			<HCaptchaWrapper theme={theme} size={size}>
+				<HCaptchaCheckbox />
+				<HCaptchaLabel theme={theme}>{__("I am human", "wp-component-library")}</HCaptchaLabel>
+				<HCaptchaLogo>
+					<HCaptchaLogoSvg>h</HCaptchaLogoSvg>
+					<HCaptchaText theme={theme}>
+						<span>hCaptcha</span>
+						<small>Privacy - Terms</small>
+					</HCaptchaText>
+				</HCaptchaLogo>
+			</HCaptchaWrapper>
+		</CaptchaContainer>
+	);
+}

package/components/captcha-placeholder/README.md

@@ -0,0 +1,228 @@
+# CaptchaPlaceholder Component
+
+A unified captcha component that provides a consistent interface for rendering different captcha providers. Supports Google reCAPTCHA (v2 & v3), hCaptcha, and Cloudflare Turnstile with customizable themes and sizes.
+
+## Features
+
+- Multiple captcha provider support
+- Unified API across all providers
+- Theme customization (light, dark, auto)
+- Size variants (normal, compact)
+- Provider-specific configuration options
+- Clean abstraction with modular architecture
+
+## Supported Providers
+
+- **Google reCAPTCHA v2** - Traditional checkbox captcha
+- **Google reCAPTCHA v3** - Invisible behavioral analysis
+- **hCaptcha** - Privacy-focused reCAPTCHA alternative
+- **Cloudflare Turnstile** - Modern captcha solution from Cloudflare
+
+## Usage
+
+```jsx
+import { CaptchaPlaceholder } from '@siratik/wp-component-library/components/captcha-placeholder';
+
+// Google reCAPTCHA v2
+<CaptchaPlaceholder
+    provider="google-recaptcha"
+    version="v2"
+    theme="light"
+    size="normal"
+/>
+
+// Google reCAPTCHA v3 (invisible)
+<CaptchaPlaceholder
+    provider="google-recaptcha"
+    version="v3"
+/>
+
+// hCaptcha
+<CaptchaPlaceholder
+    provider="hcaptcha"
+    theme="dark"
+    size="compact"
+/>
+
+// Cloudflare Turnstile
+<CaptchaPlaceholder
+    provider="cloudflare-turnstile"
+    theme="auto"
+    mode="managed"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `provider` | `string` | Required | Captcha provider: "google-recaptcha", "hcaptcha", or "cloudflare-turnstile" |
+| `theme` | `string` | `"light"` | Visual theme: "light", "dark", or "auto" |
+| `size` | `string` | `"normal"` | Captcha size: "normal" or "compact" |
+| `version` | `string` | `"v2"` | Google reCAPTCHA version: "v2" or "v3" (Google only) |
+| `mode` | `string` | `"managed"` | Cloudflare Turnstile mode: "managed", "non-interactive", or "invisible" |
+
+## Provider-Specific Configuration
+
+### Google reCAPTCHA
+
+#### Version 2 (Checkbox)
+```jsx
+<CaptchaPlaceholder
+    provider="google-recaptcha"
+    version="v2"
+    theme="light"  // or "dark"
+    size="normal"   // or "compact"
+/>
+```
+
+#### Version 3 (Invisible)
+```jsx
+<CaptchaPlaceholder
+    provider="google-recaptcha"
+    version="v3"
+    // v3 is invisible, theme and size are ignored
+/>
+```
+
+### hCaptcha
+```jsx
+<CaptchaPlaceholder
+    provider="hcaptcha"
+    theme="dark"    // "light", "dark", or "auto"
+    size="compact"  // "normal" or "compact"
+/>
+```
+
+### Cloudflare Turnstile
+```jsx
+<CaptchaPlaceholder
+    provider="cloudflare-turnstile"
+    theme="auto"    // "light", "dark", or "auto"
+    mode="managed"  // "managed", "non-interactive", or "invisible"
+/>
+```
+
+## Theme Options
+
+- **light** - Light background, dark text
+- **dark** - Dark background, light text  
+- **auto** - Automatically matches user's system preference (Turnstile & hCaptcha only)
+
+## Size Options
+
+- **normal** - Standard size captcha
+- **compact** - Smaller footprint for space-constrained layouts
+
+## Cloudflare Turnstile Modes
+
+- **managed** - Cloudflare decides when to show challenges
+- **non-interactive** - Never shows interactive challenges
+- **invisible** - Completely hidden from view
+
+## Examples
+
+### Form with reCAPTCHA v2
+```jsx
+function ContactForm() {
+    return (
+        <form>
+            <input type="email" placeholder="Email" />
+            <textarea placeholder="Message" />
+            
+            <CaptchaPlaceholder
+                provider="google-recaptcha"
+                version="v2"
+                theme="light"
+            />
+            
+            <button type="submit">Send</button>
+        </form>
+    );
+}
+```
+
+### Dark Mode Support
+```jsx
+function DarkModeForm({ isDarkMode }) {
+    return (
+        <form>
+            <CaptchaPlaceholder
+                provider="hcaptcha"
+                theme={isDarkMode ? "dark" : "light"}
+                size="normal"
+            />
+        </form>
+    );
+}
+```
+
+### Invisible Protection
+```jsx
+function SecureAction() {
+    return (
+        <div>
+            <button onClick={handleAction}>
+                Perform Secure Action
+            </button>
+            
+            <CaptchaPlaceholder
+                provider="cloudflare-turnstile"
+                mode="invisible"
+            />
+        </div>
+    );
+}
+```
+
+### Compact Layout
+```jsx
+function SidebarForm() {
+    return (
+        <aside className="sidebar">
+            <form>
+                <input type="text" />
+                
+                <CaptchaPlaceholder
+                    provider="hcaptcha"
+                    size="compact"
+                    theme="auto"
+                />
+                
+                <button>Submit</button>
+            </form>
+        </aside>
+    );
+}
+```
+
+## Integration Notes
+
+### Site Keys Required
+Each provider requires site keys to be configured:
+- Google reCAPTCHA: Obtain from [Google reCAPTCHA Admin](https://www.google.com/recaptcha/admin)
+- hCaptcha: Get from [hCaptcha Dashboard](https://dashboard.hcaptcha.com)
+- Cloudflare Turnstile: Available in [Cloudflare Dashboard](https://dash.cloudflare.com)
+
+### Server-Side Validation
+Remember to validate captcha responses on your server:
+1. Capture the captcha response token
+2. Send to your server with form data
+3. Verify with the provider's API
+4. Process form only if verification succeeds
+
+### Styling
+The component renders provider-specific markup. Additional styling can be applied via wrapper elements:
+```jsx
+<div className="captcha-wrapper">
+    <CaptchaPlaceholder {...props} />
+</div>
+```
+
+## Notes
+
+- Returns `null` for unsupported providers
+- Each provider component is loaded separately for optimal bundle size
+- Theme and size support varies by provider
+- Ensure you comply with each provider's terms of service
+- Consider privacy implications when choosing a provider

package/components/captcha-placeholder/index.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import { GoogleRecaptchaV2, GoogleRecaptchaV3 } from './GoogleRecaptcha';
+import { HCaptcha } from './HCaptcha';
+import { CloudflareTurnstile } from './CloudflareTurnstile';
+
+/**
+ * Captcha placeholder component
+ *
+ * @param {Object} props Component props
+ * @param {string} props.provider - The captcha provider (google-recaptcha, hcaptcha, cloudflare-turnstile)
+ * @param {string} props.theme - Theme for the captcha (light, dark, auto)
+ * @param {string} props.size - Size for the captcha (normal, compact)
+ * @param {string} props.version - Version for Google reCAPTCHA (v2, v3)
+ * @param {string} props.mode - Mode for Cloudflare Turnstile (managed, non-interactive, invisible)
+ * @returns {WPElement} Captcha placeholder element
+ */
+export function CaptchaPlaceholder({ provider, theme = 'light', size = 'normal', version = 'v2', mode = 'managed' }) {
+	if (provider === 'google-recaptcha' && version === 'v2') {
+		return <GoogleRecaptchaV2 theme={theme} size={size} />;
+	}
+
+	if (provider === 'google-recaptcha' && version === 'v3') {
+		return <GoogleRecaptchaV3 />;
+	}
+
+	if (provider === 'hcaptcha') {
+		return <HCaptcha theme={theme} size={size} />;
+	}
+
+	if (provider === 'cloudflare-turnstile') {
+		return <CloudflareTurnstile theme={theme} mode={mode} />;
+	}
+
+	return null;
+}
+
+export default CaptchaPlaceholder;

package/components/captcha-placeholder/styles.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import styled from "@emotion/styled";
+
+export const CaptchaContainer = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-bottom: 16px;
+`;
+
+export const CheckboxBorder = styled.div`
+	width: 24px;
+	height: 24px;
+	border: 2px solid #c1c1c1;
+	border-radius: 2px;
+	margin-right: 12px;
+	background: white;
+	position: relative;
+`;
+
+export const InvisibleNotice = styled.div`
+	padding: 12px 16px;
+	background: #f0f9ff;
+	border: 1px solid #bae6fd;
+	border-radius: 4px;
+	color: #0369a1;
+	font-size: 13px;
+	text-align: center;
+`;
+
+export const RECAPTCHA_LOGO_BASE64 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6IiBmaWxsPSIjNDI4NUY0Ii8+Cjwvc3ZnPg==";