@pmate/account-sdk 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/account-sdk",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "src",
@@ -36,6 +36,7 @@
     }
   },
   "dependencies": {
+    "@pmate/auth-widgets": "^0.1.0",
     "@pmate/lang": "^1.0.2",
     "@pmate/meta": "^1.1.3",
     "@pmate/service-core": "^1.0.0",

package/src/api/AppService.ts

@@ -1,17 +1,17 @@
 import { lru } from "@pmate/utils"
-import type { AppConfig, ProfileStep } from "../types/app"
+import type { AppConfig, AppThemePreset, ProfileStep } from "../types/app"
 
-const APPS_ENDPOINT = "https://apps-api.pmate.chat"
-const DEFAULT_BACKGROUND = "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)"
+const APPS_ENDPOINT =
+  process.env.VITE_PUBLIC_APPS_SERVER_ENDPOINT || "https://apps-api.pmate.chat"
 const DEFAULT_ICON = "https://parrot-static.pmate.chat/parrot-logo.png"
+const DEFAULT_THEME_PRESET: AppThemePreset = "default"
 
 type AppRegistryRecord = {
   id: string
   name: string
   icon: string
   theme?: {
-    background?: string
-    themeColor?: string
+    preset?: AppThemePreset
     welcomeText?: string
   }
   profileSchema?: ProfileStep[]
@@ -26,12 +26,12 @@ const buildDisplayNameFromAppId = (appId: string): string => {
 
 const toAppConfig = (record: AppRegistryRecord): AppConfig => {
   const fallbackName = buildDisplayNameFromAppId(record.id)
+  const themePreset = record.theme?.preset || DEFAULT_THEME_PRESET
   return {
     id: record.id,
     name: record.name || fallbackName,
     icon: record.icon || DEFAULT_ICON,
-    background: record.theme?.background || DEFAULT_BACKGROUND,
-    themeColor: record.theme?.themeColor,
+    themePreset,
     welcomeText: record.theme?.welcomeText || `Welcome to ${fallbackName}`,
     profiles: record.profileSchema ?? [],
   }

package/src/components/{AuthProviderV2.tsx → AuthProvider.tsx}

@@ -1,5 +1,7 @@
-import { Button } from "./Button"
-import { Drawer } from "./Drawer"
+import {
+  AuthLoginPromptSheet,
+  AuthSessionErrorCard,
+} from "@pmate/auth-widgets"
 import { useSetAtom } from "jotai"
 import {
   Component,
@@ -8,16 +10,16 @@ import {
   useEffect,
   useState,
 } from "react"
-import { useAuthSnapshot } from "../hooks/useAuthSnapshot"
 import { accountAtom } from "../atoms/accountAtom"
-import { AccountLifecycleState } from "../types/account.types"
 import { userLogoutAtom } from "../atoms/userLogoutAtom"
-import { Redirect } from "../utils/Redirect"
+import { useAuthSnapshot } from "../hooks/useAuthSnapshot"
+import { AccountLifecycleState } from "../types/account.types"
 import { NotAuthenticatedError } from "../utils/errors"
 import {
   getWindowPathname,
   subscribeToLocationChange,
 } from "../utils/location"
+import { Redirect } from "../utils/Redirect"
 
 export type AuthRoute =
   | string
@@ -69,12 +71,12 @@ const getAuthBehaviors = (
   }
 }
 
-type AuthProviderV2Props = PropsWithChildren<{
+type AuthProviderProps = PropsWithChildren<{
   app: string
   authRoutes?: AuthRoute[]
   onLoginSuccess?: () => void | Promise<void>
-  rtcProvider?: React.ComponentType<{ children: React.ReactNode }>
   pathname?: string
+  rtcProvider?: React.ComponentType<{ children: React.ReactNode }>
 }>
 
 const useWindowPathname = () => {
@@ -87,13 +89,13 @@ const useWindowPathname = () => {
   return pathname
 }
 
-export const AuthProviderV2 = ({
+export const AuthProvider = ({
   app,
   authRoutes,
-  rtcProvider: RtcProvider,
-  pathname: pathnameProp,
   children,
-}: AuthProviderV2Props) => {
+  pathname: pathnameProp,
+  rtcProvider: RtcProvider,
+}: AuthProviderProps) => {
   const pathname = pathnameProp ?? useWindowPathname()
   const [isLoginPromptOpen, setIsLoginPromptOpen] = useState(false)
   const [isLoginErrorDismissed, setIsLoginErrorDismissed] = useState(false)
@@ -152,6 +154,7 @@ export const AuthProviderV2 = ({
       requiresAuth && !snapshot.account && authBehavior === "prompt",
     )
   }, [authBehavior, loading, requiresAuth, snapshot.account])
+
   useEffect(() => {
     if (!loginError) {
       setIsLoginErrorDismissed(false)
@@ -162,9 +165,7 @@ export const AuthProviderV2 = ({
     setIsLoginPromptOpen(false)
     if (window.history.length > 1) {
       window.history.back()
-      return
     }
-    // window.location.href = "/"
   }
 
   if (loading && requiresAuth) {
@@ -172,26 +173,12 @@ export const AuthProviderV2 = ({
   }
   if (loginError && requiresAuth && !isLoginErrorDismissed) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
-        <div className="w-full max-w-md rounded-xl border border-rose-200 bg-white p-6 shadow-sm">
-          <div className="text-sm font-semibold text-rose-600">
-            Login failed
-          </div>
-          <p className="mt-2 text-sm text-slate-600">
-            We could not restore your session. Please try again.
-          </p>
-          <div className="mt-3 text-xs text-rose-500">{loginError.message}</div>
-          <div className="mt-4 flex flex-wrap gap-3">
-            <button
-              className="rounded-md bg-rose-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-rose-700"
-              type="button"
-              onClick={() => window.location.reload()}
-            >
-              Reload
-            </button>
-          </div>
-        </div>
-      </div>
+      <AuthSessionErrorCard
+        title="Login failed"
+        description="We could not restore your session. Please try again."
+        message={loginError.message}
+        onAction={() => window.location.reload()}
+      />
     )
   }
   if (requiresAuth && hasAccount === null) {
@@ -199,36 +186,12 @@ export const AuthProviderV2 = ({
   }
   if (requiresAuth && hasAccount === false && authBehavior === "prompt") {
     return (
-      <Drawer
+      <AuthLoginPromptSheet
         open={isLoginPromptOpen}
-        onClose={handleBack}
-        anchor="bottom"
-        overlayClassName="bg-black/40"
-      >
-        <div className="rounded-t-2xl px-6 pb-6 pt-4">
-          <div className="mx-auto mb-3 h-1.5 w-12 rounded-full bg-slate-200" />
-          <div className="text-lg font-semibold text-slate-900">
-            You need login to continue ?
-          </div>
-          <div className="mt-5 flex items-center justify-end gap-3">
-            <Button
-              type="button"
-              variant="plain"
-              className="min-w-[96px] justify-center"
-              onClick={handleBack}
-            >
-              Back
-            </Button>
-            <Button
-              type="button"
-              className="min-w-[96px] justify-center"
-              onClick={() => Redirect.toLogin(app)}
-            >
-              Login
-            </Button>
-          </div>
-        </div>
-      </Drawer>
+        onBack={handleBack}
+        onLogin={() => Redirect.toLogin(app)}
+        title="You need login to continue ?"
+      />
     )
   }
   if (!requiresAuth) {
@@ -242,6 +205,8 @@ export const AuthProviderV2 = ({
   )
 }
 
+export const AuthProviderV2 = AuthProvider
+
 interface AuthErrorBoundaryState {
   hasError: boolean
 }
@@ -281,8 +246,8 @@ class AuthErrorBoundaryInner extends Component<
 }
 
 const AuthErrorBoundary = ({
-  children,
   app,
+  children,
 }: PropsWithChildren<{
   app: string
 }>) => {

package/src/components/index.ts

@@ -1 +1 @@
-export * from "./AuthProviderV2"
+export * from "./AuthProvider"

package/src/hooks/useAppBackgroundStyle.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react"
 import { getWindowSearch, subscribeToLocationChange } from "../utils/location"
+import { getAppThemeBackground } from "../utils/appTheme"
 import { useAppConfig } from "./useAppConfig"
 
 export const useAppBackgroundStyle = () => {
@@ -17,8 +18,7 @@ export const useAppBackgroundStyle = () => {
 
   return useMemo(
     () => ({
-      background:
-        appConfig?.background || "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)",
+      background: getAppThemeBackground(appConfig?.themePreset),
     }),
     [appConfig]
   )

package/src/index.ts

@@ -2,7 +2,7 @@ export * from "./atoms"
 export * from "./components"
 export * from "./i18n"
 export { DEFAULT_APP_ID } from "./constants"
-export type { AppConfig, ProfileStep } from "./types/app"
+export type { AppConfig, AppThemePreset, ProfileStep } from "./types/app"
 export * from "./hooks"
 export * from "./utils"
 export * from "./api"

package/src/types/app.ts

@@ -11,12 +11,18 @@ export type ProfileStep = {
   required: boolean
 }
 
+export type AppThemePreset =
+  | "default"
+  | "chat"
+  | "parrotmate"
+  | "sunrise"
+  | "graphite"
+
 export interface AppConfig {
   id: string
   name: string
   icon: string
-  background: string
-  themeColor?: string
+  themePreset: AppThemePreset
   welcomeText: string
   profiles: ProfileStep[]
 }

package/src/utils/appTheme.ts

@@ -0,0 +1,16 @@
+import type { AppThemePreset } from "../types/app"
+
+const DEFAULT_THEME_PRESET: AppThemePreset = "default"
+
+const THEME_BACKGROUNDS: Record<AppThemePreset, string> = {
+  default: "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)",
+  chat: "linear-gradient(180deg, #0f766e 0%, #115e59 100%)",
+  parrotmate: "linear-gradient(180deg, #5b4cf0 0%, #4537d2 100%)",
+  sunrise: "linear-gradient(180deg, #f59e0b 0%, #ea580c 100%)",
+  graphite: "linear-gradient(180deg, #111827 0%, #1f2937 100%)",
+}
+
+export const getAppThemeBackground = (themePreset?: AppThemePreset) => {
+  const preset = themePreset ?? DEFAULT_THEME_PRESET
+  return THEME_BACKGROUNDS[preset] ?? THEME_BACKGROUNDS[DEFAULT_THEME_PRESET]
+}

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from "./resolveAppId"
 export * from "./errors"
 export * from "./profileStep"
 export * from "./Redirect"
+export * from "./appTheme"

package/src/components/Button.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-
-type ButtonVariant = "primary" | "plain"
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant
-}
-
-const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
-  parts.filter(Boolean).join(" ")
-
-const baseClassName =
-  "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
-
-const variantClassName: Record<ButtonVariant, string> = {
-  primary: "bg-slate-900 text-white hover:bg-slate-800",
-  plain: "border border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
-}
-
-export const Button = ({
-  variant = "primary",
-  className,
-  disabled,
-  ...props
-}: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      disabled={disabled}
-      className={joinClassNames(
-        baseClassName,
-        variantClassName[variant],
-        disabled && "cursor-not-allowed opacity-60",
-        className,
-      )}
-    />
-  )
-}

package/src/components/Drawer.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react"
-
-type DrawerAnchor = "left" | "right" | "top" | "bottom"
-
-export interface DrawerProps {
-  open: boolean
-  onClose: () => void
-  children: React.ReactNode
-  anchor?: DrawerAnchor
-  className?: string
-  overlayClassName?: string
-  id?: string
-  style?: React.CSSProperties
-}
-
-const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
-  parts.filter(Boolean).join(" ")
-
-const positionClassMap: Record<DrawerAnchor, string> = {
-  left: "left-0 top-0 h-full",
-  right: "right-0 top-0 h-full",
-  top: "left-0 top-0 w-full",
-  bottom: "bottom-0 left-0 w-full",
-}
-
-const hiddenTransformMap: Record<DrawerAnchor, string> = {
-  left: "-translate-x-full",
-  right: "translate-x-full",
-  top: "-translate-y-full",
-  bottom: "translate-y-full",
-}
-
-export const Drawer = ({
-  open,
-  onClose,
-  children,
-  anchor = "right",
-  className,
-  overlayClassName,
-  id,
-  style,
-}: DrawerProps) => {
-  const [mounted, setMounted] = useState(open)
-
-  useEffect(() => {
-    if (open) {
-      setMounted(true)
-    }
-  }, [open])
-
-  const handleTransitionEnd = () => {
-    if (!open) {
-      setMounted(false)
-    }
-  }
-
-  if (!mounted) return null
-
-  return (
-    <div
-      id={id}
-      className={joinClassNames("fixed inset-0 z-[1002]", overlayClassName)}
-      onClick={onClose}
-    >
-      <div
-        className={joinClassNames(
-          "absolute bg-white transition-transform duration-300",
-          positionClassMap[anchor],
-          open ? "translate-x-0 translate-y-0" : hiddenTransformMap[anchor],
-          className,
-        )}
-        style={style}
-        onClick={(event) => event.stopPropagation()}
-        onTransitionEnd={handleTransitionEnd}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}