@tribe-nest/forge 1.13.0

package/src/ui/styled/ContactForm.tsx

@@ -0,0 +1,81 @@
+import { useContactForm } from "../headless/forms/useContactForm";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface ContactFormProps {
+  buttonText?: string;
+  successMessage?: string;
+  showJoinEmailList?: boolean;
+}
+
+/** One-line themed website contact form, built on `useContactForm`. */
+export function ContactForm({
+  buttonText = "Send Message",
+  successMessage = "Message sent — we'll be in touch.",
+  showJoinEmailList = true,
+}: ContactFormProps) {
+  const theme = useForgeTheme();
+  const f = useContactForm();
+
+  const inputStyle = {
+    width: "100%",
+    padding: 10,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.background,
+    color: theme.colors.text,
+  } as const;
+
+  if (f.isSuccess) {
+    return (
+      <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "center", padding: 8 }}>
+        {successMessage}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10, color: theme.colors.text, fontFamily: theme.fontFamily }}>
+      <input placeholder="Your name" value={f.name} onChange={(e) => f.setName(e.target.value)} style={inputStyle} />
+      {f.errors.name && <p style={{ color: "#ef4444", fontSize: 13 }}>{f.errors.name}</p>}
+
+      <input type="email" placeholder="Email" value={f.email} onChange={(e) => f.setEmail(e.target.value)} style={inputStyle} />
+      {f.errors.email && <p style={{ color: "#ef4444", fontSize: 13 }}>{f.errors.email}</p>}
+
+      <textarea
+        placeholder="Your message"
+        value={f.message}
+        onChange={(e) => f.setMessage(e.target.value)}
+        rows={4}
+        style={inputStyle}
+      />
+      {f.errors.message && <p style={{ color: "#ef4444", fontSize: 13 }}>{f.errors.message}</p>}
+
+      {showJoinEmailList && (
+        <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 14 }}>
+          <input type="checkbox" checked={f.joinEmailList} onChange={(e) => f.setJoinEmailList(e.target.checked)} />
+          Also join the email list
+        </label>
+      )}
+
+      {f.errors.form && <p style={{ color: "#ef4444", fontSize: 14 }}>{f.errors.form}</p>}
+
+      <button
+        onClick={f.submit}
+        disabled={f.isSubmitting}
+        style={{
+          background: theme.colors.primary,
+          color: readableTextOn(theme.colors.primary),
+          border: "none",
+          borderRadius: theme.cornerRadius,
+          padding: "10px 18px",
+          fontWeight: 600,
+          cursor: "pointer",
+          opacity: f.isSubmitting ? 0.6 : 1,
+        }}
+      >
+        {f.isSubmitting ? "Sending…" : buttonText}
+      </button>
+    </div>
+  );
+}

package/src/ui/styled/CookieConsent.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { useCookieConsent } from "../headless/consent/useCookieConsent";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface CookieConsentProps {
+  /** Heading text. */
+  title?: string;
+  /** Body copy above the toggles. */
+  description?: React.ReactNode;
+  /** Show the Performance/analytics toggle. Default `true`. Set `false` when
+   * first-party analytics runs cookieless (it needs no storage consent), so the
+   * banner only governs Marketing. */
+  showPerformance?: boolean;
+  /** Link to the site's own privacy policy (rendered after the description). */
+  privacyPolicyHref?: string;
+  /**
+   * Fall back to TribeNest's hosted privacy policy
+   * (https://www.tribenest.co/privacy) when the site doesn't have its own.
+   * Ignored if `privacyPolicyHref` is set. Opens in a new tab.
+   */
+  useTribeNestPrivacy?: boolean;
+  /**
+   * Controlled visibility. Leave undefined for the default behaviour (show once
+   * until the visitor decides). Set `true` to force it open again so a visitor
+   * can change their choice — wire a "Cookie settings" link to a boolean state
+   * and pass it here (see the site-starter footer for the pattern).
+   */
+  open?: boolean;
+  /** Called after the visitor makes a choice or dismisses — use it to reset your
+   * controlled `open` state back to false. */
+  onClose?: () => void;
+  /** Extra class on the outer wrapper. */
+  className?: string;
+}
+
+type Draft = { performance: boolean; marketing: boolean };
+
+const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
+
+/**
+ * Drop-in cookie-consent banner. Shows once until the visitor decides, writes to
+ * the shared consent store, and — because `<ForgeAnalytics />` reads the same
+ * store — actually gates first-party analytics (performance) and the Meta Pixel
+ * (marketing). Themed via Forge tokens. Drop it into the site root:
+ * `<CookieConsent privacyPolicyHref="/privacy" />`.
+ */
+export function CookieConsent({
+  title = "Cookie Consent",
+  description = "This site uses cookies for performance, analytics, and personalization to improve the site and give you a better experience. Accept all, reject all but strictly necessary, or choose which to allow.",
+  showPerformance = true,
+  privacyPolicyHref,
+  useTribeNestPrivacy,
+  open,
+  onClose,
+  className,
+}: CookieConsentProps) {
+  const t = useThemeTokens();
+  const privacyHref = privacyPolicyHref ?? (useTribeNestPrivacy ? TRIBENEST_PRIVACY_URL : undefined);
+  // External TribeNest link opens in a new tab; a same-origin custom page stays.
+  const privacyExternal = !privacyPolicyHref && useTribeNestPrivacy;
+  const { ready, decided, consent, acceptAll, rejectAll, save } = useCookieConsent();
+  const [draft, setDraft] = useState<Draft>({
+    performance: consent?.performance ?? false,
+    marketing: consent?.marketing ?? false,
+  });
+
+  // Consent loads from storage after mount (SSR-safe). Sync the toggles to the
+  // stored choice so reopening the panel shows the visitor's current settings.
+  useEffect(() => {
+    if (consent) setDraft({ performance: consent.performance, marketing: consent.marketing });
+  }, [consent]);
+
+  // Uncontrolled: only auto-show once the stored choice has loaded (post-mount),
+  // so a returning visitor who already decided never sees a flash. A controlled
+  // `open` (the "Cookie settings" trigger) bypasses the gate.
+  const visible = open ?? (ready && !decided);
+  if (!visible) return null;
+
+  const onPrimary = t.textPrimary || readableTextOn(t.primary);
+  // Wrap each action so a controlled parent (a "Cookie settings" trigger) can
+  // reset its `open` state once the visitor is done.
+  const done = (fn: () => void) => () => {
+    fn();
+    onClose?.();
+  };
+
+  return (
+    <div
+      className={className}
+      role="dialog"
+      aria-label="Cookie consent"
+      style={{
+        position: "fixed",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 70,
+        padding: 16,
+        display: "flex",
+        justifyContent: "flex-start",
+        fontFamily: t.fontFamily,
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: 560,
+          background: t.surface,
+          color: t.text,
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          boxShadow: "0 16px 40px -16px rgba(0,0,0,0.45)",
+          padding: 20,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, fontFamily: t.headingFontFamily }}>{title}</h2>
+          {/* Close is only meaningful once a choice exists (reopened panel) —
+              on first run the visitor must pick an option. */}
+          {decided && (
+            <button
+              type="button"
+              aria-label="Close"
+              onClick={done(() => {})}
+              style={{ background: "transparent", border: "none", cursor: "pointer", color: t.muted, padding: 2, flexShrink: 0 }}
+            >
+              <X size={18} />
+            </button>
+          )}
+        </div>
+        <p style={{ margin: "8px 0 0", fontSize: 14, lineHeight: 1.5, color: t.muted }}>
+          {description}
+          {privacyHref && (
+            <>
+              {" "}
+              <a
+                href={privacyHref}
+                style={{ color: t.primary, textDecoration: "underline" }}
+                {...(privacyExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+              >
+                Privacy Policy
+              </a>
+              .
+            </>
+          )}
+        </p>
+
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 20, margin: "16px 0 4px" }}>
+          <Toggle label="Functional" checked disabled tokens={t} />
+          {showPerformance && (
+            <Toggle
+              label="Performance"
+              checked={draft.performance}
+              tokens={t}
+              onChange={(v) => setDraft((d) => ({ ...d, performance: v }))}
+            />
+          )}
+          <Toggle
+            label="Marketing"
+            checked={draft.marketing}
+            tokens={t}
+            onChange={(v) => setDraft((d) => ({ ...d, marketing: v }))}
+          />
+        </div>
+
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "flex-end", marginTop: 16 }}>
+          <button type="button" onClick={done(rejectAll)} style={ghostBtn(t)}>
+            Reject all
+          </button>
+          <button type="button" onClick={done(() => save(draft))} style={ghostBtn(t)}>
+            Save settings
+          </button>
+          <button type="button" onClick={done(acceptAll)} style={{ ...ghostBtn(t), background: t.primary, color: onPrimary, border: "none" }}>
+            Accept all
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ghostBtn(t: ReturnType<typeof useThemeTokens>): React.CSSProperties {
+  return {
+    padding: "9px 16px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontWeight: 600,
+    fontSize: 14,
+    cursor: "pointer",
+  };
+}
+
+function Toggle({
+  label,
+  checked,
+  disabled,
+  onChange,
+  tokens: t,
+}: {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange?: (v: boolean) => void;
+  tokens: ReturnType<typeof useThemeTokens>;
+}) {
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: disabled ? "default" : "pointer" }}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange?.(!checked)}
+        style={{
+          width: 38,
+          height: 22,
+          borderRadius: 999,
+          border: "none",
+          padding: 2,
+          cursor: disabled ? "default" : "pointer",
+          background: checked ? t.primary : t.border,
+          opacity: disabled ? 0.6 : 1,
+          transition: "background .15s",
+          display: "inline-flex",
+          justifyContent: checked ? "flex-end" : "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ width: 18, height: 18, borderRadius: "50%", background: "#fff", display: "block" }} />
+      </button>
+      <span style={{ fontSize: 13, color: t.muted }}>{label}</span>
+    </label>
+  );
+}

package/src/ui/styled/CourseAccess.tsx

@@ -0,0 +1,169 @@
+import { useRef, useState } from "react";
+import { useCourseAccess, useUpdateCourseProgress } from "../../data/queries/useCourseAccess";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface CourseAccessProps {
+  /** Course access id (route param). */
+  accessId: string;
+}
+
+/** Enrolled course player — module/lesson sidebar, video progress tracking. Built on `useCourseAccess` + `useUpdateCourseProgress`. */
+export function CourseAccess({ accessId }: CourseAccessProps) {
+  const theme = useForgeTheme();
+  const { data, isLoading, error } = useCourseAccess(accessId);
+  const updateProgress = useUpdateCourseProgress(accessId);
+  const lastSent = useRef(0);
+
+  const modules = data?.course.modules ?? [];
+  const allLessons = modules.flatMap((m) => m.lessons);
+  const initialLessonId = data?.access.currentLessonId || allLessons[0]?.id || null;
+  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(initialLessonId);
+
+  if (isLoading) return <Loading fullPage />;
+  if (error || !data) return <p style={{ color: theme.colors.text }}>Course access not found.</p>;
+
+  const selected = allLessons.find((l) => l.id === selectedLessonId) ?? allLessons[0];
+  const videoUrl = selected?.media?.find((m) => m.type === "video")?.url;
+  const files = selected?.media?.filter((m) => m.type !== "video") ?? [];
+  const completedCount = allLessons.filter((l) => l.progress?.isCompleted).length;
+
+  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+    const el = e.currentTarget;
+    if (!selected || !el.duration) return;
+    const now = Date.now();
+    if (now - lastSent.current < 1000) return;
+    lastSent.current = now;
+    const percent = (el.currentTime / el.duration) * 100;
+    const isCompleted = percent >= 95;
+    updateProgress.mutate({ lessonId: selected.id, videoProgress: percent, isCompleted });
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+        maxWidth: 1100,
+        margin: "0 auto",
+        color: theme.colors.text,
+      }}
+    >
+      <header>
+        <h1 style={{ fontSize: 26, fontWeight: 800 }}>{data.course.title}</h1>
+        <p style={{ fontSize: 14, opacity: 0.7 }}>
+          {completedCount} of {allLessons.length} lessons completed
+        </p>
+      </header>
+
+      <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
+        {/* Sidebar */}
+        <aside style={{ flex: "1 1 260px", minWidth: 240 }}>
+          {modules.map((module) => (
+            <div key={module.id} style={{ marginBottom: 16 }}>
+              <h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 6 }}>{module.title}</h2>
+              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                {module.lessons.map((lesson) => {
+                  const isSelected = lesson.id === selected?.id;
+                  const done = lesson.progress?.isCompleted;
+                  return (
+                    <button
+                      key={lesson.id}
+                      onClick={() => setSelectedLessonId(lesson.id)}
+                      style={{
+                        textAlign: "left",
+                        padding: "8px 10px",
+                        borderRadius: theme.cornerRadius,
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: 14,
+                        background: isSelected ? `${theme.colors.primary}20` : "transparent",
+                        color: isSelected ? theme.colors.primary : theme.colors.text,
+                        fontWeight: isSelected ? 600 : 400,
+                      }}
+                    >
+                      {done ? "✓ " : ""}
+                      {lesson.title}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </aside>
+
+        {/* Main */}
+        <main style={{ flex: "2 1 480px", minWidth: 320 }}>
+          {selected ? (
+            <>
+              {videoUrl ? (
+                <video
+                  key={selected.id}
+                  src={videoUrl}
+                  controls
+                  playsInline
+                  onTimeUpdate={handleTimeUpdate}
+                  style={{ width: "100%", aspectRatio: "16/9", background: "#000", borderRadius: theme.cornerRadius }}
+                />
+              ) : (
+                <div
+                  style={{
+                    width: "100%",
+                    aspectRatio: "16/9",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: `${theme.colors.text}0d`,
+                    borderRadius: theme.cornerRadius,
+                    opacity: 0.7,
+                  }}
+                >
+                  No video available for this lesson
+                </div>
+              )}
+
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "16px 0 8px" }}>{selected.title}</h2>
+
+              {files.length > 0 && (
+                <div style={{ marginBottom: 16 }}>
+                  <h3 style={{ fontWeight: 600, marginBottom: 8 }}>Additional Resources</h3>
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                    {files.map((file) => (
+                      <a
+                        key={file.id}
+                        href={file.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          padding: "10px 12px",
+                          borderRadius: theme.cornerRadius,
+                          border: `1px solid ${theme.colors.primary}40`,
+                          background: `${theme.colors.primary}10`,
+                          color: theme.colors.text,
+                          textDecoration: "none",
+                          fontSize: 14,
+                        }}
+                      >
+                        <span>{file.filename}</span>
+                        <span style={{ opacity: 0.6 }}>{(file.size / 1024 / 1024).toFixed(2)} MB</span>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selected.content && (
+                <div dangerouslySetInnerHTML={{ __html: selected.content }} style={{ lineHeight: 1.7 }} />
+              )}
+            </>
+          ) : (
+            <p style={{ opacity: 0.7 }}>No lesson selected.</p>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}