@slyxup/ui 0.1.0 → 0.2.1

package/src/components/SignUp/SignUp.tsx

@@ -0,0 +1,181 @@
+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 SignUpProps {
+  social?: boolean;
+  onSuccess?: () => void;
+  onSignInClick?: () => void;
+}
+
+/** Email/password + OAuth sign-up card. */
+export function SignUp({
+  social = true,
+  onSuccess,
+  onSignInClick,
+}: SignUpProps) {
+  const { signUp, client } = useAuth() as unknown as {
+    signUp: ReturnType<typeof useAuth>['signUp'];
+    client: { publishableKey?: string };
+  };
+  const [firstName, setFirstName] = useState('');
+  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 signUp({ email, password, firstName: firstName || undefined });
+      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> — run{' '}
+          <code>npx @slyxup/cli keys create</code>
+        </p>
+      )}
+      <div className="slx-mark">
+        <KeyholeMark />
+      </div>
+      <h1 className="slx-title">Create your account</h1>
+      <p className="slx-subtitle">A minute to set up. Sign in forever after.</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}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signup-name">
+            First name
+          </label>
+          <input
+            id="slx-signup-name"
+            className="slx-input"
+            type="text"
+            autoComplete="given-name"
+            placeholder="Ada"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-signup-email">
+            Email
+          </label>
+          <input
+            id="slx-signup-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-signup-password">
+            Password
+          </label>
+          <input
+            id="slx-signup-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}
+          />
+          <p className="slx-hint">
+            Use 8+ characters with a mix of letters and numbers.
+          </p>
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy && <span className="slx-spinner" aria-hidden="true" />}
+          {busy ? 'Creating account…' : 'Create account'}
+        </button>
+      </form>
+
+      {onSignInClick && (
+        <p className="slx-footer">
+          Already have an account?{' '}
+          <button type="button" className="slx-link" onClick={onSignInClick}>
+            Sign in
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/SocialButtons/SocialButtons.tsx

@@ -0,0 +1,39 @@
+import { GitHubIcon, GoogleIcon } from '../../icons';
+
+export interface SocialButtonsProps {
+  /** Show only these providers. Default: both */
+  providers?: Array<'google' | 'github'>;
+  /** OAuth start path base (default /v1/oauth) */
+  basePath?: string;
+}
+
+const META = {
+  google: { label: 'Continue with Google', Icon: GoogleIcon },
+  github: { label: 'Continue with GitHub', Icon: GitHubIcon },
+} as const;
+
+/** Provider buttons that redirect to hosted OAuth start. */
+export function SocialButtons({
+  providers = ['google', 'github'],
+  basePath = '/v1/oauth',
+}: SocialButtonsProps) {
+  return (
+    <div className="slx-social">
+      {providers.map((p) => {
+        const { label, Icon } = META[p];
+        return (
+          <button
+            key={p}
+            type="button"
+            className="slx-social-btn"
+            onClick={() => {
+              window.location.href = `${basePath}/${p}`;
+            }}
+          >
+            <Icon /> {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/UserButton/UserButton.tsx

@@ -0,0 +1,89 @@
+import { useAuth, useUser } from '@slyxup/react';
+import { useEffect, useRef, useState } from 'react';
+
+function initials(name: string | null | undefined, email: string): string {
+  if (name?.trim()) return name.trim().slice(0, 1).toUpperCase();
+  return email.slice(0, 1).toUpperCase();
+}
+
+/** Avatar + dropdown with profile actions and sign out. */
+export function UserButton() {
+  const { isLoaded, user } = useUser();
+  const { signOut } = useAuth();
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node))
+        setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, []);
+
+  if (!isLoaded)
+    return <div className="slx-userbtn-avatar" aria-hidden="true" />;
+  const email = user?.email ?? '';
+  const name = user?.firstName;
+
+  async function onSignOut() {
+    await signOut();
+    setOpen(false);
+  }
+
+  return (
+    <div className="slx-userbtn-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className="slx-userbtn-avatar"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Account menu"
+      >
+        {user?.avatarUrl ? (
+          <img src={user.avatarUrl} alt="" />
+        ) : (
+          initials(name, email || '?')
+        )}
+      </button>
+
+      {open && (
+        <div className="slx-menu" role="menu">
+          <div className="slx-menu-header">
+            <p className="slx-menu-name">
+              {name
+                ? `${name}${user?.lastName ? ` ${user.lastName}` : ''}`
+                : email.split('@')[0]}
+            </p>
+            <p className="slx-menu-email">{email}</p>
+          </div>
+          <button
+            type="button"
+            className="slx-menu-item"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+          >
+            Profile settings
+          </button>
+          <button
+            type="button"
+            className="slx-menu-item slx-menu-item-danger"
+            role="menuitem"
+            onClick={onSignOut}
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/UserProfile/UserProfile.tsx

@@ -0,0 +1,93 @@
+import { useAuth, useUser } from '@slyxup/react';
+import { type FormEvent, useEffect, useState } from 'react';
+
+/** Edit first/last name + avatar URL. */
+export function UserProfile() {
+  const { isLoaded, user, reload } = useUser();
+  const { client } = useAuth();
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (user) {
+      setFirstName(user.firstName ?? '');
+      setLastName(user.lastName ?? '');
+      setAvatarUrl(user.avatarUrl ?? '');
+    }
+  }, [user]);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setSaved(false);
+    try {
+      await client.users.update({ firstName, lastName, avatarUrl });
+      await reload();
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2500);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (!isLoaded) return <div className="slx-card" aria-busy="true" />;
+
+  return (
+    <div className="slx-card">
+      <h1 className="slx-title">Profile</h1>
+      <p className="slx-subtitle">Signed in as {user?.email}</p>
+
+      {saved && (
+        <p className="slx-error-text" style={{ color: '#34a853' }}>
+          Profile saved.
+        </p>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-profile-first">
+            First name
+          </label>
+          <input
+            id="slx-profile-first"
+            className="slx-input"
+            type="text"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-profile-last">
+            Last name
+          </label>
+          <input
+            id="slx-profile-last"
+            className="slx-input"
+            type="text"
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+          />
+        </div>
+        <div className="slx-field">
+          <label className="slx-label" htmlFor="slx-profile-avatar">
+            Avatar URL
+          </label>
+          <input
+            id="slx-profile-avatar"
+            className="slx-input"
+            type="url"
+            placeholder="https://…"
+            value={avatarUrl}
+            onChange={(e) => setAvatarUrl(e.target.value)}
+          />
+        </div>
+        <button className="slx-btn" type="submit" disabled={busy}>
+          {busy ? 'Saving…' : 'Save changes'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/icons.tsx

@@ -0,0 +1,71 @@
+/** Shared icons (stroke = currentColor) */
+
+export function KeyholeMark() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="9" r="3.2" fill="white" />
+      <path d="M10.6 11.5h2.8l.7 6h-4.2l.7-6z" fill="white" />
+    </svg>
+  );
+}
+
+export function GoogleIcon() {
+  return (
+    <svg width="17" height="17" viewBox="0 0 18 18" aria-hidden="true">
+      <path
+        fill="#4285F4"
+        d="M17.64 9.2c0-.63-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92a8.78 8.78 0 0 0 2.68-6.62z"
+      />
+      <path
+        fill="#34A853"
+        d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.81.54-1.84.86-3.05.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M3.96 10.71a5.41 5.41 0 0 1 0-3.42V4.96H.96a9 9 0 0 0 0 8.08l3-2.33z"
+      />
+      <path
+        fill="#EA4335"
+        d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59A9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z"
+      />
+    </svg>
+  );
+}
+
+export function GitHubIcon() {
+  return (
+    <svg
+      width="17"
+      height="17"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+    </svg>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6L9 17l-5-5" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -1 +1,37 @@
-export const placeholder = 'ui';
+export { injectStyles, CSS } from './styles';
+export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon } from './icons';
+
+export { SignIn, type SignInProps } from './components/SignIn/SignIn';
+export { SignUp, type SignUpProps } from './components/SignUp/SignUp';
+export { UserButton } from './components/UserButton/UserButton';
+export { UserProfile } from './components/UserProfile/UserProfile';
+export {
+  ForgotPassword,
+  type ForgotPasswordProps,
+} from './components/ForgotPassword/ForgotPassword';
+export {
+  ResetPassword,
+  type ResetPasswordProps,
+} from './components/ResetPassword/ResetPassword';
+export {
+  EmailVerification,
+  type EmailVerificationProps,
+} from './components/EmailVerification/EmailVerification';
+export {
+  SocialButtons,
+  type SocialButtonsProps,
+} from './components/SocialButtons/SocialButtons';
+
+import { useEffect } from 'react';
+import { injectStyles } from './styles';
+
+/**
+ * Inject the SlyxUp stylesheet once. Render inside your app root
+ * (or rely on any component auto-injecting on mount).
+ */
+export function SlyxUpStyles(): null {
+  useEffect(() => {
+    injectStyles();
+  }, []);
+  return null;
+}