@slyxup/ui 0.1.0 → 0.2.1

package/src/components/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,122 @@
+import { SlyxupClient } from '@slyxup/core';
+import { type FormEvent, useEffect, useState } from 'react';
+import { CheckIcon, KeyholeMark } from '../../icons';
+
+export interface ForgotPasswordProps {
+  apiUrl?: string;
+  onSuccess?: () => void;
+  onBackToSignIn?: () => void;
+}
+
+/** Request a password-reset email. */
+export function ForgotPassword({
+  apiUrl,
+  onSuccess,
+  onBackToSignIn,
+}: ForgotPasswordProps) {
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await fetch(
+        `${(apiUrl ?? process.env.NEXT_PUBLIC_SLYXUP_API_URL ?? 'https://auth.slyxup.online').replace(/\/$/, '')}/v1/verification/password/forgot`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }
+      );
+      setSent(true); // always success — never reveal account existence
+      onSuccess?.();
+    } catch {
+      setError('Network problem. Check your connection and try again.');
+    } finally {
+      setBusy(false);
+    }
+    void SlyxupClient; // tree-shake guard
+  }
+
+  if (sent) {
+    return (
+      <div className="slx-card">
+        <div className="slx-success-icon">
+          <CheckIcon />
+        </div>
+        <h1 className="slx-title" style={{ textAlign: 'center' }}>
+          Check your email
+        </h1>
+        <p className="slx-subtitle" style={{ textAlign: 'center' }}>
+          If an account exists for {email}, a reset link is on its way.
+        </p>
+        {onBackToSignIn && (
+          <p className="slx-footer">
+            <button type="button" className="slx-link" onClick={onBackToSignIn}>
+              Back to sign in
+            </button>
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Reset your password</h1>
+      <p className="slx-subtitle">
+        Enter your email and we&apos;ll send you a reset link.
+      </p>
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-forgot-email">
+            Email
+          </label>
+          <input
+            id="slx-forgot-email"
+            className="slx-input"
+            type="email"
+            autoComplete="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Sending…' : 'Send reset link'}
+        </button>
+      </form>
+
+      {onBackToSignIn && (
+        <p className="slx-footer">
+          <button type="button" className="slx-link" onClick={onBackToSignIn}>
+            Back to sign in
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/PricingTable/PricingTable.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Plan {
+  id: string;
+  name: string;
+  amount: number;
+  currency: string;
+  interval: 'month' | 'year';
+  trialDays: number | null;
+  features: string[] | null;
+  isPopular: boolean;
+}
+
+export interface PricingTableProps {
+  plans: Plan[];
+  onSelect?: (plan: Plan) => void;
+  loading?: boolean;
+}
+
+/** Clean pricing grid with popular badge */
+export function PricingTable({ plans, onSelect, loading }: PricingTableProps) {
+  if (loading) {
+    return (
+      <div
+        className="slx-pricing"
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
+          gap: 16,
+        }}
+      >
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="slx-card"
+            style={{ minHeight: 320 }}
+            aria-busy="true"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
+        gap: 16,
+      }}
+    >
+      {plans.map((plan) => (
+        <div
+          key={plan.id}
+          className={`slx-card${plan.isPopular ? ' slx-card-popular' : ''}`}
+          style={{
+            position: plan.isPopular ? 'relative' : undefined,
+            borderColor: plan.isPopular ? 'var(--slx-accent)' : undefined,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {plan.isPopular && (
+            <span
+              style={{
+                position: 'absolute',
+                top: -11,
+                right: 20,
+                fontSize: 10.5,
+                fontFamily: 'var(--slx-mono)',
+                background:
+                  'linear-gradient(135deg, var(--slx-accent), #8b5cf6)',
+                color: '#fff',
+                padding: '3px 10px',
+                borderRadius: 999,
+              }}
+            >
+              POPULAR
+            </span>
+          )}
+          <h3
+            style={{ fontSize: 15, fontWeight: 550, color: 'var(--slx-muted)' }}
+          >
+            {plan.name}
+          </h3>
+          <div style={{ margin: '8px 0 2px' }}>
+            <span
+              style={{
+                fontSize: 38,
+                fontWeight: 750,
+                letterSpacing: '-0.03em',
+                fontFamily: '"Space Grotesk",sans-serif',
+              }}
+            >
+              ${(plan.amount / 100).toFixed(0)}
+            </span>
+            <span style={{ fontSize: 14, color: 'var(--slx-muted)' }}>
+              /{plan.interval}
+            </span>
+          </div>
+          {plan.trialDays ? (
+            <p
+              style={{
+                fontSize: 12,
+                color: 'var(--slx-accent)',
+                marginBottom: 4,
+              }}
+            >
+              {plan.trialDays} day free trial
+            </p>
+          ) : (
+            <p style={{ fontSize: 12, color: 'transparent', marginBottom: 4 }}>
+              &nbsp;
+            </p>
+          )}
+          <ul style={{ listStyle: 'none', margin: '14px 0 22px', flex: 1 }}>
+            {((plan.features ?? []) as string[]).map((f: string) => (
+              <li
+                key={f}
+                style={{
+                  fontSize: 13.5,
+                  color: 'var(--slx-ink)',
+                  padding: '5px 0 5px 24px',
+                  position: 'relative',
+                }}
+              >
+                <span
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    color: '#34d399',
+                    fontWeight: 700,
+                  }}
+                >
+                  &#10003;
+                </span>{' '}
+                {f}
+              </li>
+            ))}
+          </ul>
+          <button
+            type="button"
+            className="slx-btn"
+            onClick={() => onSelect?.(plan)}
+            disabled={loading}
+          >
+            Get started
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ResetPassword/ResetPassword.tsx

@@ -0,0 +1,120 @@
+import { type FormEvent, useEffect, useState } from 'react';
+import { CheckIcon, KeyholeMark } from '../../icons';
+
+export interface ResetPasswordProps {
+  /** Reset token (from email link ?token=...) */
+  token: string;
+  apiUrl?: string;
+  onSuccess?: () => void;
+}
+
+/** Set a new password using the emailed reset token. */
+export function ResetPassword({
+  token,
+  apiUrl,
+  onSuccess,
+}: ResetPasswordProps) {
+  const [password, setPassword] = useState('');
+  const [done, setDone] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      const base = (
+        apiUrl ??
+        process.env.NEXT_PUBLIC_SLYXUP_API_URL ??
+        'https://auth.slyxup.online'
+      ).replace(/\/$/, '');
+      const res = await fetch(`${base}/v1/verification/password/reset`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const data = await res
+          .json()
+          .catch(() => ({ error: 'Invalid or expired link' }));
+        throw new Error(data.error ?? 'Invalid or expired link');
+      }
+      setDone(true);
+      onSuccess?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="slx-card">
+        <div className="slx-success-icon">
+          <CheckIcon />
+        </div>
+        <h1 className="slx-title" style={{ textAlign: 'center' }}>
+          Password updated
+        </h1>
+        <p className="slx-subtitle" style={{ textAlign: 'center' }}>
+          Your password has been changed. Use it to sign in.
+        </p>
+        {onSuccess && (
+          <button type="button" className="slx-btn" onClick={onSuccess}>
+            Continue to sign in
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Choose a new password</h1>
+      <p className="slx-subtitle">
+        Pick something strong you haven&apos;t used before.
+      </p>
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-reset-password">
+            New password
+          </label>
+          <input
+            id="slx-reset-password"
+            className="slx-input"
+            type="password"
+            autoComplete="new-password"
+            placeholder="At least 8 characters"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Updating…' : 'Update password'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/SignIn/SignIn.tsx

@@ -0,0 +1,168 @@
+import { SlyxupError } from '@slyxup/core';
+import { useAuth } from '@slyxup/react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
+import { GitHubIcon, GoogleIcon, KeyholeMark } from '../../icons';
+
+export interface SignInProps {
+  /** Show social buttons (default true) */
+  social?: boolean;
+  /** Called after successful sign in */
+  onSuccess?: () => void;
+  /** Switch to sign up */
+  onSignUpClick?: () => void;
+}
+
+/** Email/password + OAuth sign-in card. */
+export function SignIn({
+  social = true,
+  onSuccess,
+  onSignUpClick,
+}: SignInProps) {
+  const { signIn, client } = useAuth() as unknown as {
+    signIn: ReturnType<typeof useAuth>['signIn'];
+    client: { publishableKey?: string };
+  };
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await signIn({ email, password });
+      onSuccess?.();
+    } catch (err) {
+      setError(
+        err instanceof SlyxupError
+          ? err.message
+          : 'Something went wrong. Try again.'
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function oauth(provider: 'google' | 'github') {
+    window.location.href = `/v1/oauth/${provider}`;
+  }
+
+  const missingKey =
+    !client.publishableKey ||
+    client.publishableKey === 'pk_test_missing' ||
+    client.publishableKey.includes('REPLACE');
+
+  return (
+    <div ref={cardRef} className={`slx-card${error ? ' slx-card-error' : ''}`}>
+      {missingKey && (
+        <p
+          style={{
+            fontSize: 12,
+            background: '#fff3cd',
+            border: '1px solid #ffe69c',
+            borderRadius: 8,
+            padding: '8px 10px',
+            marginBottom: 14,
+            lineHeight: 1.4,
+          }}
+        >
+          <strong>Setup:</strong> Add{' '}
+          <code>NEXT_PUBLIC_SLYXUP_PUBLISHABLE_KEY</code> to{' '}
+          <code>.env.local</code> — run <code>npx @slyxup/cli keys create</code>
+        </p>
+      )}
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Sign in</h1>
+      <p className="slx-subtitle">
+        Welcome back. Enter your details to continue.
+      </p>
+
+      {social && (
+        <>
+          <div className="slx-social">
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('google')}
+            >
+              <GoogleIcon /> Continue with Google
+            </button>
+            <button
+              type="button"
+              className="slx-social-btn"
+              onClick={() => oauth('github')}
+            >
+              <GitHubIcon /> Continue with GitHub
+            </button>
+          </div>
+          <div className="slx-divider">or</div>
+        </>
+      )}
+
+      {error && (
+        <p className="slx-error-text" role="alert">
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={onSubmit} noValidate={false}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signin-email">
+            Email
+          </label>
+          <input
+            id="slx-signin-email"
+            className="slx-input"
+            type="email"
+            autoComplete="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signin-password">
+            Password
+          </label>
+          <input
+            id="slx-signin-password"
+            className="slx-input"
+            type="password"
+            autoComplete="current-password"
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Signing in…' : 'Sign in'}
+        </button>
+      </form>
+
+      {onSignUpClick && (
+        <p className="slx-footer">
+          Don&apos;t have an account?{' '}
+          <button type="button" className="slx-link" onClick={onSignUpClick}>
+            Sign up
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}