@slyxup/ui 0.2.15 → 0.3.0

package/src/icons.tsx

@@ -1,71 +0,0 @@
-/** 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,56 +0,0 @@
-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,
-  type UserButtonProps,
-} from './components/UserButton/UserButton';
-export {
-  UserProfile,
-  type UserProfileProps,
-} 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';
-export {
-  BillingPortal,
-  type BillingPortalProps,
-} from './components/BillingPortal/BillingPortal';
-export {
-  PricingTable,
-  type PricingTableProps,
-} from './components/PricingTable/PricingTable';
-export {
-  AdminPanel,
-  type AdminPanelProps,
-} from './components/AdminPanel/AdminPanel';
-export { initPaddle, openPaddleCheckout } from './lib/paddle';
-
-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;
-}

package/src/lib/paddle.ts

@@ -1,131 +0,0 @@
-// Paddle.js loader — lazy-loads Paddle.js and initializes overlay checkout
-// Docs: https://developer.paddle.com/paddle-js
-
-declare global {
-  interface Window {
-    Paddle?: {
-      Initialize: (config: {
-        token: string;
-        eventCallback?: (data: Record<string, unknown>) => void;
-      }) => void;
-      Environment: { set: (env: 'sandbox' | 'production') => void };
-      Checkout: {
-        open: (options: {
-          items: Array<{ priceId: string; quantity: number }>;
-          customer?: { email?: string };
-          settings?: Record<string, unknown>;
-          customData?: Record<string, unknown>;
-        }) => void;
-      };
-    };
-  }
-}
-
-const PADDLE_JS_URL = 'https://cdn.paddle.com/paddle/v2/paddle.js';
-let paddleLoaded = false;
-let paddleInitPromise: Promise<void> | null = null;
-
-function loadScript(src: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    if (document.querySelector(`script[src="${src}"]`)) {
-      resolve();
-      return;
-    }
-    const s = document.createElement('script');
-    s.src = src;
-    s.onload = () => resolve();
-    s.onerror = () => reject(new Error(`Failed to load ${src}`));
-    document.head.appendChild(s);
-  });
-}
-
-/**
- * Derive billing URL from auth API URL.
- * localhost:8787 → localhost:8788, auth.slyxup.online → billing.slyxup.online
- */
-function deriveBillingUrl(authApiUrl: string): string {
-  if (/^https?:\/\/localhost(:\d+)?$/.test(authApiUrl)) {
-    return authApiUrl.replace(/:(\d+)$/, ':8788');
-  }
-  return authApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
-}
-
-interface BillingConfig {
-  environment: 'sandbox' | 'production';
-  clientToken: string;
-}
-
-let cachedConfig: BillingConfig | null = null;
-
-/**
- * Fetch Paddle config from billing Worker's /v1/billing/config endpoint.
- * Cached after first fetch.
- */
-async function fetchBillingConfig(billingUrl: string): Promise<BillingConfig> {
-  if (cachedConfig) return cachedConfig;
-  const res = await fetch(`${billingUrl}/v1/billing/config`);
-  const data = (await res.json().catch(() => ({}))) as {
-    ok?: boolean;
-    environment?: string;
-    clientToken?: string;
-  };
-  if (!res.ok || !data.ok || !data.clientToken) {
-    throw new Error('Failed to fetch billing config');
-  }
-  cachedConfig = {
-    environment: (data.environment as 'sandbox' | 'production') ?? 'sandbox',
-    clientToken: data.clientToken,
-  };
-  return cachedConfig;
-}
-
-/**
- * Load Paddle.js and initialize with config from billing Worker.
- * Safe to call multiple times — only loads the script once.
- */
-export async function initPaddle(authApiUrl: string): Promise<void> {
-  if (paddleLoaded && window.Paddle) return;
-
-  if (!paddleInitPromise) {
-    paddleInitPromise = (async () => {
-      const billingUrl = deriveBillingUrl(authApiUrl);
-      const config = await fetchBillingConfig(billingUrl);
-      await loadScript(PADDLE_JS_URL);
-      if (!window.Paddle) throw new Error('Paddle.js failed to load');
-      window.Paddle.Environment.set(config.environment);
-      window.Paddle.Initialize({
-        token: config.clientToken,
-        eventCallback: (data) => {
-          if (data && data.name === 'checkout.completed') {
-            // Subscription is created via webhook. Notify the host app so it can
-            // refresh billing state and show a success confirmation.
-            window.dispatchEvent(new CustomEvent('slyxup:checkout-completed'));
-          }
-        },
-      });
-      paddleLoaded = true;
-    })();
-  }
-  return paddleInitPromise;
-}
-
-/**
- * Open Paddle overlay checkout for a given price ID.
- * `customData` is copied to the created transaction (and, for recurring
- * items, to the related subscription) — the billing webhook uses it to
- * attribute the subscription to a SlyxUp user + project + plan.
- */
-export function openPaddleCheckout(
-  priceId: string,
-  customerEmail?: string,
-  customData?: Record<string, unknown>
-): void {
-  if (!window.Paddle) {
-    throw new Error('Paddle.js not initialized — call initPaddle() first');
-  }
-  window.Paddle.Checkout.open({
-    items: [{ priceId, quantity: 1 }],
-    ...(customerEmail ? { customer: { email: customerEmail } } : {}),
-    ...(customData ? { customData } : {}),
-  });
-}