timeback 0.0.0-alpha.2 → 0.1.0

package/dist/client/adapters/solid/SignInButton.tsx

@@ -0,0 +1,321 @@
+/**
+ * Sign In with Timeback Button (Solid)
+ *
+ * A pre-styled button for Timeback SSO authentication.
+ * Fully customizable via CSS variables.
+ */
+
+/* @jsxImportSource solid-js */
+
+import { createSignal, onMount } from 'solid-js'
+
+import { useTimeback } from './context'
+
+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
+}
+
+/**
+ * Timeback logo SVG.
+ *
+ * @param props - Component props
+ * @returns SVG element
+ */
+function TimebackLogo(props: { class?: string }): JSX.Element {
+	return (
+		<svg
+			class={props.class}
+			width="20"
+			height="18"
+			viewBox="0 0 199 180"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<g clip-path="url(#tb-logo-clip-solid)">
+				<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"
+				/>
+				<circle cx="40" cy="133" r="39" fill="currentColor" />
+				<circle cx="39" cy="39" r="39" fill="currentColor" />
+			</g>
+			<defs>
+				<clipPath id="tb-logo-clip-solid">
+					<rect width="199" height="180" fill="currentColor" />
+				</clipPath>
+			</defs>
+		</svg>
+	)
+}
+
+/**
+ * Loading spinner SVG.
+ *
+ * @param props - Component props
+ * @returns SVG element
+ */
+function LoadingSpinner(props: { class?: string }): JSX.Element {
+	return (
+		<svg
+			class={props.class}
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<circle
+				cx="12"
+				cy="12"
+				r="10"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-opacity="0.25"
+			/>
+			<path
+				d="M12 2C6.48 2 2 6.48 2 12"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+			/>
+		</svg>
+	)
+}
+
+/**
+ * Default CSS styles using CSS variables for customization.
+ */
+const 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); }
+}
+`
+
+// Track if styles have been injected
+let stylesInjected = false
+
+/**
+ * Inject default styles into the document head.
+ */
+function injectStyles(): void {
+	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
+}
+
+/**
+ * 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 function SignInButton(props: SignInButtonProps): JSX.Element {
+	const {
+		children,
+		class: className,
+		style,
+		disabled,
+		showLoading = true,
+		onClick,
+		variant = 'default',
+		size = 'md',
+		showLogo = true,
+	} = props
+
+	const timeback = useTimeback()
+	const [isLoading, setIsLoading] = createSignal(false)
+
+	onMount(() => {
+		injectStyles()
+	})
+
+	const handleClick = (e: MouseEvent) => {
+		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 (
+		<button
+			type="button"
+			class={classNames}
+			style={style}
+			disabled={disabled || !timeback || isLoading()}
+			onClick={handleClick}
+			aria-busy={isLoading()}
+		>
+			{isLoading() ? (
+				<LoadingSpinner class="timeback-signin-btn__spinner" />
+			) : showLogo ? (
+				<TimebackLogo class="timeback-signin-btn__logo" />
+			) : null}
+			{children ?? 'Sign in with Timeback'}
+		</button>
+	)
+}

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

@@ -0,0 +1,73 @@
+/**
+ * Solid Context
+ *
+ * Context-based Timeback client for Solid.
+ */
+import { TimebackClient } from 'timeback/client';
+import type { JSX } from 'solid-js';
+/**
+ * Props for TimebackProvider.
+ */
+export interface TimebackProviderProps {
+    /** Optional custom client instance */
+    client?: TimebackClient;
+    /** Children to render */
+    children: JSX.Element;
+}
+/**
+ * Timeback provider component.
+ *
+ * Wraps your app to provide the Timeback client via context.
+ *
+ * @param props - Provider props
+ * @returns Provider component
+ *
+ * @example
+ * ```tsx
+ * import { TimebackProvider } from 'timeback/solid'
+ *
+ * function App() {
+ *   return (
+ *     <TimebackProvider>
+ *       <MyApp />
+ *     </TimebackProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function TimebackProvider(props: TimebackProviderProps): JSX.Element;
+/**
+ * Hook to access the Timeback client.
+ *
+ * Must be used within a `TimebackProvider`.
+ *
+ * @returns The Timeback client or undefined if not in provider
+ *
+ * @example
+ * ```tsx
+ * import { useTimeback } from 'timeback/solid'
+ *
+ * function MyComponent() {
+ *   const timeback = useTimeback()
+ *
+ *   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;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/solid/context.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAOnC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACrC,sCAAsC;IACtC,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,yBAAyB;IACzB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAI1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,IAAI,cAAc,GAAG,SAAS,CAExD"}

package/dist/client/adapters/solid/context.tsx

@@ -0,0 +1,91 @@
+/**
+ * Solid Context
+ *
+ * Context-based Timeback client for Solid.
+ */
+
+/* @jsxImportSource solid-js */
+
+import { createContext, useContext } from 'solid-js'
+import { TimebackClient } from 'timeback/client'
+
+import type { JSX } from 'solid-js'
+
+/**
+ * Timeback context.
+ */
+const TimebackContext = createContext<TimebackClient | undefined>(undefined)
+
+/**
+ * Props for TimebackProvider.
+ */
+export interface TimebackProviderProps {
+	/** Optional custom client instance */
+	client?: TimebackClient
+	/** Children to render */
+	children: JSX.Element
+}
+
+/**
+ * Timeback provider component.
+ *
+ * Wraps your app to provide the Timeback client via context.
+ *
+ * @param props - Provider props
+ * @returns Provider component
+ *
+ * @example
+ * ```tsx
+ * import { TimebackProvider } from 'timeback/solid'
+ *
+ * function App() {
+ *   return (
+ *     <TimebackProvider>
+ *       <MyApp />
+ *     </TimebackProvider>
+ *   )
+ * }
+ * ```
+ */
+export function TimebackProvider(props: TimebackProviderProps): JSX.Element {
+	const client = props.client ?? new TimebackClient()
+
+	return <TimebackContext.Provider value={client}>{props.children}</TimebackContext.Provider>
+}
+
+/**
+ * Hook to access the Timeback client.
+ *
+ * Must be used within a `TimebackProvider`.
+ *
+ * @returns The Timeback client or undefined if not in provider
+ *
+ * @example
+ * ```tsx
+ * import { useTimeback } from 'timeback/solid'
+ *
+ * function MyComponent() {
+ *   const timeback = useTimeback()
+ *
+ *   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 function useTimeback(): TimebackClient | undefined {
+	return useContext(TimebackContext)
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Solid Client Module
+ *
+ * Solid-specific exports for Timeback SDK.
+ *
+ * @example
+ * ```tsx
+ * import { TimebackProvider, useTimeback, SignInButton } from 'timeback/solid'
+ *
+ * function App() {
+ *   return (
+ *     <TimebackProvider>
+ *       <MyComponent />
+ *     </TimebackProvider>
+ *   )
+ * }
+ *
+ * function MyComponent() {
+ *   const timeback = useTimeback()
+ *
+ *   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 <SignInButton />
+ * }
+ * ```
+ */
+export { Activity, createClient, TimebackClient } from 'timeback/client';
+export type { ActivityMetrics, ActivityParams, TimebackUser } from 'timeback/client';
+export { TimebackProvider, useTimeback } from './context';
+export type { TimebackProviderProps } from './context';
+export { SignInButton } from './SignInButton';
+export type { SignInButtonProps } from './SignInButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/solid/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACxE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAGpF,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/client/adapters/solid/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Solid Client Module
+ *
+ * Solid-specific exports for Timeback SDK.
+ *
+ * @example
+ * ```tsx
+ * import { TimebackProvider, useTimeback, SignInButton } from 'timeback/solid'
+ *
+ * function App() {
+ *   return (
+ *     <TimebackProvider>
+ *       <MyComponent />
+ *     </TimebackProvider>
+ *   )
+ * }
+ *
+ * function MyComponent() {
+ *   const timeback = useTimeback()
+ *
+ *   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 <SignInButton />
+ * }
+ * ```
+ */
+
+export { Activity, createClient, TimebackClient } from 'timeback/client'
+export type { ActivityMetrics, ActivityParams, TimebackUser } from 'timeback/client'
+
+// Solid-specific
+export { TimebackProvider, useTimeback } from './context'
+export type { TimebackProviderProps } from './context'
+
+// Components
+export { SignInButton } from './SignInButton'
+export type { SignInButtonProps } from './SignInButton'