timeback 0.0.0-alpha.1-alpha.1 → 0.1.0

package/dist/client/adapters/react/index.js

@@ -0,0 +1,478 @@
+// src/shared/constants.ts
+var DEFAULT_BASE_PATH = "/api/timeback";
+var ROUTES = {
+  ACTIVITY: "/activity",
+  IDENTITY: {
+    SIGNIN: "/identity/signin",
+    SIGNOUT: "/identity/signout",
+    CALLBACK: "/identity/callback"
+  },
+  USER: {
+    ME: "/user/me"
+  }
+};
+
+// src/client/lib/utils.ts
+function isBrowser() {
+  return typeof window !== "undefined";
+}
+function getDefaultBaseURL() {
+  if (!isBrowser()) {
+    return;
+  }
+  return `${window.location.origin}${DEFAULT_BASE_PATH}`;
+}
+
+// src/client/lib/activity/activity.class.ts
+class Activity {
+  params;
+  sendActivity;
+  _startedAt;
+  _isPaused = false;
+  _pausedAt;
+  _totalPausedMs = 0;
+  _ended = false;
+  constructor(params, sendActivity) {
+    this.params = params;
+    this.sendActivity = sendActivity;
+  }
+  get isStarted() {
+    return this._startedAt !== undefined;
+  }
+  get startedAt() {
+    return this._startedAt;
+  }
+  start() {
+    if (this._startedAt)
+      return this;
+    this._startedAt = new Date;
+    return this;
+  }
+  get isPaused() {
+    return this._isPaused;
+  }
+  get elapsedMs() {
+    if (!this._startedAt || this._ended) {
+      return 0;
+    }
+    const now = new Date;
+    let elapsed = now.getTime() - this._startedAt.getTime() - this._totalPausedMs;
+    if (this._isPaused && this._pausedAt) {
+      elapsed -= now.getTime() - this._pausedAt.getTime();
+    }
+    return Math.max(0, elapsed);
+  }
+  pause() {
+    if (!this._startedAt || this._isPaused || this._ended)
+      return;
+    this._isPaused = true;
+    this._pausedAt = new Date;
+  }
+  resume() {
+    if (!this._isPaused || this._ended || !this._pausedAt)
+      return;
+    this._totalPausedMs += new Date().getTime() - this._pausedAt.getTime();
+    this._isPaused = false;
+    this._pausedAt = undefined;
+  }
+  async end(metrics) {
+    if (!this._startedAt) {
+      throw new Error("Cannot end activity that was never started");
+    }
+    if (this._ended)
+      return;
+    this._ended = true;
+    if (this._isPaused && this._pausedAt) {
+      this._totalPausedMs += new Date().getTime() - this._pausedAt.getTime();
+    }
+    const endedAt = new Date;
+    const elapsedMs = endedAt.getTime() - this._startedAt.getTime() - this._totalPausedMs;
+    const payload = {
+      id: this.params.id,
+      name: this.params.name,
+      courseCode: this.params.courseCode,
+      startedAt: this._startedAt.toISOString(),
+      endedAt: endedAt.toISOString(),
+      elapsedMs: Math.max(0, elapsedMs),
+      pausedMs: this._totalPausedMs,
+      metrics
+    };
+    await this.sendActivity(payload);
+  }
+}
+
+// src/client/lib/activity/activity.ts
+function createActivity(params, sendActivity) {
+  return new Activity(params, sendActivity);
+}
+// src/client/namespaces/activity.ts
+class ActivityManager {
+  sendActivity;
+  constructor(sendActivity) {
+    this.sendActivity = sendActivity;
+  }
+  new(params) {
+    return new Activity(params, this.sendActivity);
+  }
+}
+// src/client/namespaces/auth.ts
+class Auth {
+  getBaseURL;
+  constructor(getBaseURL) {
+    this.getBaseURL = getBaseURL;
+  }
+  signIn() {
+    if (!isBrowser()) {
+      throw new Error("signIn() requires a browser environment");
+    }
+    window.location.href = `${this.getBaseURL()}${ROUTES.IDENTITY.SIGNIN}`;
+  }
+}
+// src/client/namespaces/user.ts
+class User {
+  getBaseURL;
+  constructor(getBaseURL) {
+    this.getBaseURL = getBaseURL;
+  }
+  async fetch() {
+    if (!isBrowser()) {
+      throw new Error("user.fetch() requires a browser environment");
+    }
+    const response = await fetch(`${this.getBaseURL()}${ROUTES.USER.ME}`, {
+      method: "GET",
+      credentials: "include"
+    });
+    if (!response.ok) {
+      const errorResponse = await response.json().catch(() => ({ error: "Unknown error" }));
+      throw new Error(errorResponse.error ?? "Failed to fetch user profile");
+    }
+    return response.json();
+  }
+}
+// src/client/timeback-client.class.ts
+class TimebackClient {
+  activity;
+  auth;
+  user;
+  _baseURL;
+  constructor(config = {}) {
+    this._baseURL = config.baseURL;
+    this.activity = new ActivityManager((payload) => this.sendActivity(payload));
+    this.auth = new Auth(() => this.baseURL);
+    this.user = new User(() => this.baseURL);
+  }
+  get baseURL() {
+    if (!this._baseURL) {
+      const resolved = getDefaultBaseURL();
+      if (!resolved) {
+        throw new Error("Timeback client requires a browser environment for default baseURL. " + "Provide an explicit baseURL for server-side usage.");
+      }
+      this._baseURL = resolved;
+    }
+    return this._baseURL;
+  }
+  async sendActivity(payload) {
+    const response = await fetch(`${this.baseURL}${ROUTES.ACTIVITY}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+      credentials: "include"
+    });
+    if (!response.ok) {
+      const errorResponse = await response.json().catch(() => ({ error: "Unknown error" }));
+      throw new Error(errorResponse.error ?? "Failed to send activity");
+    }
+  }
+}
+
+// src/client/timeback-client.ts
+function createClient(config = {}) {
+  const baseURL = config.baseURL ?? getDefaultBaseURL();
+  return new TimebackClient({ baseURL });
+}
+// src/client/adapters/react/provider.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var TimebackContext = React.createContext(undefined);
+var clientInstance;
+function getOrCreateClient() {
+  if (!clientInstance) {
+    clientInstance = new TimebackClient;
+  }
+  return clientInstance;
+}
+function TimebackProvider({
+  client: providedClient,
+  children
+}) {
+  const [client, setClient] = React.useState(providedClient);
+  React.useEffect(() => {
+    if (!client) {
+      setClient(providedClient ?? getOrCreateClient());
+    }
+  }, [client, providedClient]);
+  return /* @__PURE__ */ jsx(TimebackContext.Provider, {
+    value: client,
+    children
+  });
+}
+function useTimeback() {
+  return React.useContext(TimebackContext);
+}
+// src/client/adapters/react/SignInButton.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TimebackLogo({ className }) {
+  return /* @__PURE__ */ jsxs("svg", {
+    className,
+    width: "20",
+    height: "18",
+    viewBox: "0 0 199 180",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxs("g", {
+        clipPath: "url(#tb-logo-clip)",
+        children: [
+          /* @__PURE__ */ jsx2("path", {
+            d: "M121.432 179.456C110.607 177.871 101.153 173.91 92.4882 168.085C91.1274 167.17 89.4598 165.404 89.4375 164.008C89.2123 149.891 89.3002 135.77 89.3002 119.86C93.1365 123.255 95.8538 125.706 98.6224 128.099C103.151 132.012 107.437 136.28 112.314 139.703C126.466 149.635 145.037 147.25 156.045 134.448C166.919 121.803 167.226 101.374 155.695 89.6399C145.727 79.4958 134.693 70.3995 123.251 60.0438C123.251 77.8871 123.251 94.5637 123.251 112.15C121.428 110.999 120.279 110.479 119.383 109.676C110.329 101.573 101.241 93.5044 92.3634 85.2109C90.8519 83.7988 89.4363 81.3758 89.4209 79.4084C89.2249 54.4218 89.2905 29.4332 89.3061 4.44502C89.3066 3.64954 89.3061 2.22136 89.3061 1.47755C90.8061 1.47755 92.694 1.47857 94.1427 1.47755C118.131 1.46071 142.12 1.52088 166.108 1.39821C169.235 1.38222 171.33 2.18661 173.251 4.75826C180.607 14.6032 188.189 24.279 196.266 34.7705C179.79 34.7705 164.169 34.7705 148.548 34.7705C147.871 34.7705 147.366 34.7705 146.866 34.7705C147.866 35.7705 150.35 38.3018 151.61 39.4825C162.643 49.8249 174.663 59.3807 184.245 70.947C202.474 92.9508 203.539 118.134 191.204 143.046C178.598 168.508 156.61 180.302 128.298 180.295C126.154 180.295 124.011 179.778 121.432 179.456Z",
+            fill: "currentColor"
+          }),
+          /* @__PURE__ */ jsx2("circle", {
+            cx: "40",
+            cy: "133",
+            r: "39",
+            fill: "currentColor"
+          }),
+          /* @__PURE__ */ jsx2("circle", {
+            cx: "39",
+            cy: "39",
+            r: "39",
+            fill: "currentColor"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("defs", {
+        children: /* @__PURE__ */ jsx2("clipPath", {
+          id: "tb-logo-clip",
+          children: /* @__PURE__ */ jsx2("rect", {
+            width: "199",
+            height: "180",
+            fill: "currentColor"
+          })
+        })
+      })
+    ]
+  });
+}
+function LoadingSpinner({ className }) {
+  return /* @__PURE__ */ jsxs("svg", {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeOpacity: "0.25"
+      }),
+      /* @__PURE__ */ jsx2("path", {
+        d: "M12 2C6.48 2 2 6.48 2 12",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      })
+    ]
+  });
+}
+var defaultStyles = `
+.timeback-signin-btn {
+  /* Colors */
+  --tb-btn-bg: #0f172a;
+  --tb-btn-bg-hover: #1e293b;
+  --tb-btn-text: #ffffff;
+  --tb-btn-border: transparent;
+  
+  /* Outline variant */
+  --tb-btn-outline-bg: transparent;
+  --tb-btn-outline-bg-hover: #f1f5f9;
+  --tb-btn-outline-text: #0f172a;
+  --tb-btn-outline-border: #e2e8f0;
+  
+  /* Minimal variant */
+  --tb-btn-minimal-bg: transparent;
+  --tb-btn-minimal-bg-hover: #f1f5f9;
+  --tb-btn-minimal-text: #0f172a;
+  
+  /* Sizing */
+  --tb-btn-padding-x: 1rem;
+  --tb-btn-padding-y: 0.625rem;
+  --tb-btn-font-size: 0.875rem;
+  --tb-btn-border-radius: 0.5rem;
+  --tb-btn-gap: 0.5rem;
+  
+  /* Transitions */
+  --tb-btn-transition: all 150ms ease;
+  
+  /* Focus ring */
+  --tb-btn-focus-ring: #3b82f6;
+  --tb-btn-focus-ring-offset: 2px;
+  
+  /* Base styles */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tb-btn-gap);
+  padding: var(--tb-btn-padding-y) var(--tb-btn-padding-x);
+  font-size: var(--tb-btn-font-size);
+  font-weight: 500;
+  font-family: inherit;
+  line-height: 1.5;
+  border-radius: var(--tb-btn-border-radius);
+  border: 1px solid var(--tb-btn-border);
+  background-color: var(--tb-btn-bg);
+  color: var(--tb-btn-text);
+  cursor: pointer;
+  transition: var(--tb-btn-transition);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.timeback-signin-btn:hover:not(:disabled) {
+  background-color: var(--tb-btn-bg-hover);
+}
+
+.timeback-signin-btn:focus-visible {
+  outline: 2px solid var(--tb-btn-focus-ring);
+  outline-offset: var(--tb-btn-focus-ring-offset);
+}
+
+.timeback-signin-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Outline variant */
+.timeback-signin-btn--outline {
+  --tb-btn-bg: var(--tb-btn-outline-bg);
+  --tb-btn-bg-hover: var(--tb-btn-outline-bg-hover);
+  --tb-btn-text: var(--tb-btn-outline-text);
+  --tb-btn-border: var(--tb-btn-outline-border);
+}
+
+/* Minimal variant */
+.timeback-signin-btn--minimal {
+  --tb-btn-bg: var(--tb-btn-minimal-bg);
+  --tb-btn-bg-hover: var(--tb-btn-minimal-bg-hover);
+  --tb-btn-text: var(--tb-btn-minimal-text);
+  --tb-btn-border: transparent;
+}
+
+/* Sizes */
+.timeback-signin-btn--sm {
+  --tb-btn-padding-x: 0.75rem;
+  --tb-btn-padding-y: 0.375rem;
+  --tb-btn-font-size: 0.75rem;
+  --tb-btn-gap: 0.375rem;
+}
+
+.timeback-signin-btn--lg {
+  --tb-btn-padding-x: 1.5rem;
+  --tb-btn-padding-y: 0.75rem;
+  --tb-btn-font-size: 1rem;
+  --tb-btn-gap: 0.625rem;
+}
+
+/* Logo */
+.timeback-signin-btn__logo {
+  flex-shrink: 0;
+}
+
+/* Loading spinner */
+.timeback-signin-btn__spinner {
+  animation: timeback-spin 1s linear infinite;
+}
+
+@keyframes timeback-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+var stylesInjected = false;
+function injectStyles() {
+  if (typeof document === "undefined" || stylesInjected)
+    return;
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-timeback-styles", "");
+  styleEl.textContent = defaultStyles;
+  document.head.appendChild(styleEl);
+  stylesInjected = true;
+}
+function SignInButton(props) {
+  const {
+    children = "Sign in with Timeback",
+    className,
+    style,
+    disabled,
+    showLoading = true,
+    onClick,
+    variant = "default",
+    size = "md",
+    showLogo = true
+  } = props;
+  const timeback = useTimeback();
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const isReady = !!timeback;
+  React2.useEffect(() => {
+    injectStyles();
+  }, []);
+  const handleClick = (e) => {
+    if (onClick) {
+      onClick(e);
+      if (e.defaultPrevented)
+        return;
+    }
+    if (showLoading) {
+      setIsLoading(true);
+    }
+    timeback?.auth.signIn();
+  };
+  const classNames = [
+    "timeback-signin-btn",
+    variant !== "default" && `timeback-signin-btn--${variant}`,
+    size !== "md" && `timeback-signin-btn--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("button", {
+    type: "button",
+    className: classNames,
+    style,
+    disabled: disabled || !isReady || isLoading,
+    onClick: handleClick,
+    "aria-busy": isLoading,
+    children: [
+      isLoading ? /* @__PURE__ */ jsx2(LoadingSpinner, {
+        className: "timeback-signin-btn__spinner"
+      }) : showLogo ? /* @__PURE__ */ jsx2(TimebackLogo, {
+        className: "timeback-signin-btn__logo"
+      }) : null,
+      children
+    ]
+  });
+}
+export {
+  useTimeback,
+  createClient,
+  TimebackProvider,
+  TimebackClient,
+  SignInButton,
+  Activity
+};

package/dist/client/adapters/react/provider.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Timeback Provider
+ *
+ * React context provider for Timeback client.
+ */
+import * as React from 'react';
+import { TimebackClient } from '../../timeback-client.class';
+/**
+ * Props for TimebackProvider.
+ */
+interface TimebackProviderProps {
+    /** Optional Timeback client instance. If not provided, one is created automatically. */
+    client?: TimebackClient;
+    /** Child components */
+    children: React.ReactNode;
+}
+/**
+ * Provider component for Timeback client.
+ *
+ * Creates a client automatically if not provided. Handles SSR gracefully.
+ *
+ * @param props - Provider props
+ * @param props.client - Optional Timeback client instance
+ * @param props.children - Child components
+ * @returns Provider element
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - client is created automatically
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <TimebackProvider>{children}</TimebackProvider>
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ */
+export declare function TimebackProvider({ client: providedClient, children }: TimebackProviderProps): React.ReactElement;
+/**
+ * Hook to access the Timeback client.
+ *
+ * Returns the client instance or undefined if not yet hydrated.
+ * Use this to access all Timeback functionality: auth, user, activities.
+ *
+ * @returns The Timeback client or undefined
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const timeback = useTimeback()
+ *
+ *   if (!timeback) return <Loading />
+ *
+ *   const handleSignIn = () => timeback.auth.signIn()
+ *
+ *   const handleFetchProfile = async () => {
+ *     const profile = await timeback.user.fetch()
+ *   }
+ *
+ *   const handleStartActivity = () => {
+ *     const activity = timeback.activity.new({ id: 'lesson-1', name: 'Intro', courseCode: 'MATH' })
+ *     activity.start()
+ *   }
+ *
+ *   return <button onClick={handleSignIn}>Sign In</button>
+ * }
+ * ```
+ */
+export declare function useTimeback(): TimebackClient | undefined;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/client/adapters/react/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/react/provider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAO5D;;GAEG;AACH,UAAU,qBAAqB;IAC9B,wFAAwF;IACxF,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAiBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,MAAM,EAAE,cAAc,EACtB,QAAQ,EACR,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAU5C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,IAAI,cAAc,GAAG,SAAS,CAExD"}

package/dist/client/adapters/solid/SignInButton.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Sign In with Timeback Button (Solid)
+ *
+ * A pre-styled button for Timeback SSO authentication.
+ * Fully customizable via CSS variables.
+ */
+import type { JSX } from 'solid-js';
+/**
+ * Props for SignInButton component.
+ */
+export interface SignInButtonProps {
+    /** Button text (default: "Sign in with Timeback") */
+    children?: JSX.Element;
+    /** Additional CSS class names */
+    class?: string;
+    /** Inline styles */
+    style?: JSX.CSSProperties;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show loading spinner when clicked */
+    showLoading?: boolean;
+    /** Called before redirect (can prevent with e.preventDefault()) */
+    onClick?: (e: MouseEvent) => void;
+    /** Button variant */
+    variant?: 'default' | 'outline' | 'minimal';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show Timeback logo */
+    showLogo?: boolean;
+}
+/**
+ * Sign In with Timeback button component.
+ *
+ * Triggers SSO authentication flow when clicked.
+ *
+ * @param props - Component props
+ * @returns Button element
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SignInButton />
+ *
+ * // Custom text
+ * <SignInButton>Continue with Timeback</SignInButton>
+ *
+ * // Outline variant
+ * <SignInButton variant="outline" />
+ * ```
+ */
+export declare function SignInButton(props: SignInButtonProps): JSX.Element;
+//# sourceMappingURL=SignInButton.d.ts.map

package/dist/client/adapters/solid/SignInButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/solid/SignInButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAA;IACzB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACjC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IAC3C,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AA4MD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA2DlE"}