frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/utils/plugin.ts

@@ -0,0 +1,58 @@
+import type { App } from 'vue'
+import resourcesPlugin from '../resources/plugin'
+import call from './call'
+import initSocket from './socketio'
+import { setConfig, type FrappeUIConfig } from './config'
+
+export interface FrappeUIPluginOptions {
+  resources?: boolean | Record<string, any>
+  call?: boolean | typeof call
+  socketio?: boolean | Parameters<typeof initSocket>[0]
+  config?: Partial<FrappeUIConfig>
+}
+
+let defaultOptions: Required<
+  Pick<FrappeUIPluginOptions, 'resources' | 'call' | 'socketio'>
+> = {
+  resources: true,
+  call: true,
+  socketio: true,
+}
+
+export default {
+  install(app: App, options: FrappeUIPluginOptions = {}) {
+    options = Object.assign({}, defaultOptions, options)
+
+    // Declarative app-level config — the preferred way for apps to pass values
+    // like resourceFetcher, endpoint overrides, maxFileSize, and timezones in
+    // one place at app creation:
+    //
+    //   app.use(FrappeUI, { config: { maxFileSize: boot.max_file_size, ... } })
+    //
+    // `setConfig` remains available for values that arrive later (e.g. after a
+    // login response). Null/undefined entries are skipped so callers can pass
+    // possibly-unset values without clobbering defaults.
+    if (options.config) {
+      for (let key of Object.keys(options.config) as Array<
+        keyof FrappeUIConfig
+      >) {
+        if (options.config[key] != null) {
+          setConfig(key, options.config[key])
+        }
+      }
+    }
+
+    options.resources && app.use(resourcesPlugin, options.resources)
+
+    if (options.call) {
+      let callFunction =
+        typeof options.call === 'function' ? options.call : call
+      app.config.globalProperties.$call = callFunction
+    }
+    if (options.socketio) {
+      app.config.globalProperties.$socket = initSocket(
+        typeof options.socketio === 'object' ? options.socketio : {},
+      )
+    }
+  },
+}

package/src/utils/{request.js → request.ts}

@@ -1,4 +1,28 @@
-export function request(_options) {
+export interface RequestOptions<TResponse = unknown> {
+  url: string
+  method?: string
+  headers?: HeadersInit
+  params?: Record<string, any>
+  responseType?: 'json' | 'response'
+  signal?: AbortSignal
+  credentials?: RequestCredentials
+  transformRequest?: (
+    options: RequestOptions<TResponse>,
+  ) => RequestOptions<TResponse>
+  transformResponse?: (
+    response: Response,
+    options: RequestOptions<TResponse>,
+  ) => TResponse | Promise<TResponse>
+  transformError?: (error: unknown) => TResponse | Promise<TResponse>
+}
+
+export interface RequestError extends Error {
+  response?: Response
+}
+
+export function request<TResponse = unknown>(
+  _options: RequestOptions<TResponse>,
+): Promise<TResponse> {
   let options = Object.assign({}, _options)
   if (!options.url) {
     throw new Error('[request] options.url is required')
@@ -19,7 +43,7 @@ export function request(_options) {
     if (options.method === 'GET') {
       let params = new URLSearchParams()
       for (let key in options.params) {
-        params.append(key, options.params[key])
+        params.append(key, String(options.params[key]))
       }
       url = options.url + '?' + params.toString()
     } else {
@@ -32,6 +56,7 @@ export function request(_options) {
     headers: options.headers,
     body,
     signal: options.signal,
+    ...(options.credentials ? { credentials: options.credentials } : {}),
   })
     .then((response) => {
       if (options.transformResponse) {
@@ -43,7 +68,7 @@ export function request(_options) {
         }
         return response
       } else {
-        let error = new Error(response.statusText)
+        let error: RequestError = new Error(response.statusText)
         error.response = response
         throw error
       }

package/src/utils/{socketio.js → socketio.ts}

@@ -1,6 +1,16 @@
 import { io } from 'socket.io-client'
 
-export default function initSocket(options = {}) {
+declare global {
+  interface Window {
+    site_name?: string
+  }
+}
+
+export interface InitSocketOptions {
+  port?: number
+}
+
+export default function initSocket(options: InitSocketOptions = {}) {
   let host = window.location.hostname
   let siteName = import.meta.env.DEV ? host : window.site_name
   let socketio_port = options.port || 9000

package/src/utils/theme.ts

@@ -1,69 +1,60 @@
-import { ref, onMounted, Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 export type Theme = 'light' | 'dark' | 'system'
 
-export function useTheme() {
-  const currentTheme: Ref<Theme> = ref('light')
-
-  const getSystemTheme = (): 'light' | 'dark' => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-  }
-
-  const toggleTheme = (): void => {
-    const theme: Theme = currentTheme.value === 'dark' ? 'light' : 'dark'
-    setTheme(theme)
-  }
+const isBrowser = typeof window !== 'undefined'
 
-  const setTheme = (theme: Theme): void => {
-    currentTheme.value = theme
+// Singleton state: hoisted to module scope so every `useTheme()` consumer reads
+// and writes the same ref. The switcher card, a toggle button, and anything
+// else mirror each other in real time, all driving one `<html data-theme>`.
+const currentTheme: Ref<Theme> = ref('light')
 
-    if (theme === 'system') {
-      const systemTheme = getSystemTheme()
-      document.documentElement.setAttribute('data-theme', systemTheme)
-    } else {
-      document.documentElement.setAttribute('data-theme', theme)
-    }
-
-    localStorage.setItem('theme', theme)
-  }
+function getSystemTheme(): 'light' | 'dark' {
+  if (!isBrowser) return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
 
-  const initializeTheme = (): void => {
-    const storedTheme = localStorage.getItem('theme') as Theme | null
-    if (storedTheme && ['light', 'dark', 'system'].includes(storedTheme)) {
-      setTheme(storedTheme)
-    } else {
-      // Default to system theme
-      setTheme('system')
-    }
-  }
+function applyTheme(theme: Theme): void {
+  if (!isBrowser) return
+  const resolved = theme === 'system' ? getSystemTheme() : theme
+  document.documentElement.setAttribute('data-theme', resolved)
+}
 
-  onMounted(() => {
-    initializeTheme()
+function setTheme(theme: Theme): void {
+  currentTheme.value = theme
+  applyTheme(theme)
+  if (isBrowser) localStorage.setItem('theme', theme)
+}
 
-    // Listen for system theme changes
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    const handleSystemThemeChange = () => {
-      if (currentTheme.value === 'system') {
-        const systemTheme = getSystemTheme()
-        document.documentElement.setAttribute('data-theme', systemTheme)
-      }
-    }
+function toggleTheme(): void {
+  setTheme(currentTheme.value === 'dark' ? 'light' : 'dark')
+}
 
-    mediaQuery.addEventListener('change', handleSystemThemeChange)
+function initializeTheme(): void {
+  if (!isBrowser) return
+  const storedTheme = localStorage.getItem('theme') as Theme | null
+  const isValid = storedTheme && ['light', 'dark', 'system'].includes(storedTheme)
+  setTheme(isValid ? (storedTheme as Theme) : 'system')
+}
 
-    // Cleanup listener on unmount
-    return () => {
-      mediaQuery.removeEventListener('change', handleSystemThemeChange)
-    }
-  })
+// Restore the saved theme and keep `system` in sync with the OS. Runs once for
+// the whole app; the listener lives for the app's lifetime by design, so there
+// is no per-component listener to leak.
+let initialized = false
+function ensureInitialized(): void {
+  if (initialized || !isBrowser) return
+  initialized = true
+  initializeTheme()
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      if (currentTheme.value === 'system') applyTheme('system')
+    })
+}
 
-  return {
-    currentTheme,
-    toggleTheme,
-    setTheme,
-    initializeTheme,
-    getSystemTheme,
-  }
+export function useTheme() {
+  ensureInitialized()
+  return { currentTheme, toggleTheme, setTheme, initializeTheme, getSystemTheme }
 }

package/src/utils/useFileUpload.ts

@@ -1,7 +1,11 @@
 import { reactive, computed } from 'vue'
+import { getMaxFileSize, formatBytes, fileSizeLimitMessage } from './fileSize'
+
+export type UploadPrivacy = boolean | 0 | 1 | '0' | '1'
 
 export interface UploadOptions {
   private?: boolean
+  is_private?: UploadPrivacy
   folder?: string
   file_url?: string
   doctype?: string
@@ -14,6 +18,24 @@ export interface UploadOptions {
   max_width?: number
   max_height?: number
   params?: object
+  signal?: AbortSignal
+  onProgress?: (progress: {
+    loaded: number
+    total: number
+    percent: number
+  }) => void
+}
+
+export function isPrivateUpload(options: UploadOptions = {}) {
+  if (options.private !== undefined) return options.private
+  if (options.is_private !== undefined) {
+    return (
+      options.is_private === true ||
+      options.is_private === 1 ||
+      options.is_private === '1'
+    )
+  }
+  return false
 }
 
 export interface UploadState {
@@ -41,6 +63,37 @@ export interface UploadedFile {
   content_hash?: string
 }
 
+function parseServerMessages(error: any): string[] {
+  if (!error?._server_messages) return []
+  try {
+    return JSON.parse(error._server_messages)
+      .map((message: string) => {
+        try {
+          return JSON.parse(message).message
+        } catch {
+          return message
+        }
+      })
+      .filter(Boolean)
+  } catch {
+    return []
+  }
+}
+
+function extractUploadErrorMessage(error: any): string {
+  const messages = parseServerMessages(error)
+  if (messages.length) return messages.join('\n')
+  if (error?._error_message) return error._error_message
+  if (error?.message) return error.message
+  if (error?.exc_type === 'MaxFileSizeReachedError') {
+    const maxFileSize = getMaxFileSize()
+    return maxFileSize
+      ? `File size exceeded the maximum allowed size of ${formatBytes(maxFileSize)}.`
+      : 'File size exceeds the maximum allowed limit.'
+  }
+  return 'Upload failed'
+}
+
 export function useFileUpload() {
   const state = reactive<UploadState>({
     uploading: false,
@@ -86,6 +139,11 @@ async function upload(
   reset: () => void,
 ): Promise<UploadedFile> {
   reset()
+  const limitMessage = fileSizeLimitMessage(file)
+  if (limitMessage) {
+    state.error = new Error(limitMessage)
+    return Promise.reject(state.error)
+  }
   state.uploading = true
 
   return new Promise((resolve, reject) => {
@@ -97,11 +155,22 @@ async function upload(
       state.error = null
     })
 
+    const abort = () => {
+      xhr.abort()
+    }
+
+    options.signal?.addEventListener('abort', abort, { once: true })
+
     xhr.upload.addEventListener('progress', (e) => {
       if (e.lengthComputable) {
         state.uploaded = e.loaded
         state.total = e.total
         state.progress = Math.round((e.loaded / e.total) * 100)
+        options.onProgress?.({
+          loaded: e.loaded,
+          total: e.total,
+          percent: state.progress,
+        })
       }
     })
 
@@ -112,11 +181,20 @@ async function upload(
     xhr.addEventListener('error', (error) => {
       state.uploading = false
       state.error = 'Upload failed'
+      options.signal?.removeEventListener('abort', abort)
       reject('Upload failed')
     })
 
+    xhr.addEventListener('abort', () => {
+      state.uploading = false
+      state.error = 'Upload cancelled'
+      options.signal?.removeEventListener('abort', abort)
+      reject(new DOMException('Upload cancelled', 'AbortError'))
+    })
+
     xhr.onreadystatechange = () => {
       if (xhr.readyState == XMLHttpRequest.DONE) {
+        options.signal?.removeEventListener('abort', abort)
         let error
         if (xhr.status === 200) {
           let r = null
@@ -141,9 +219,6 @@ async function upload(
 
         if (error) {
           let exception
-          let errorParts = [
-            [error.exc_type, error._error_message].filter(Boolean).join(' '),
-          ]
           if (error.exc) {
             exception = error.exc
             try {
@@ -152,25 +227,7 @@ async function upload(
               // eslint-disable-next-line no-empty
             } catch (e) {}
           }
-          let e = new Error(errorParts.join('\n'))
-          let messages = error._server_messages
-            ? JSON.parse(error._server_messages)
-            : []
-          messages = messages
-            .map((m: string) => {
-              try {
-                return JSON.parse(m).message
-              } catch (error) {
-                return m
-              }
-            })
-            .filter(Boolean)
-          if (!messages.length) {
-            messages = error._error_message
-              ? [error._error_message]
-              : ['Internal Server Error']
-          }
-          e.message = messages.join('\n')
+          let e = new Error(extractUploadErrorMessage(error))
           state.error = e
           reject(e)
         }
@@ -192,7 +249,7 @@ async function upload(
       formData.append('file', file, file.name)
     }
 
-    formData.append('is_private', options.private ? '1' : '0')
+    formData.append('is_private', isPrivateUpload(options) ? '1' : '0')
     formData.append('folder', options.folder || 'Home')
 
     if (options.file_url) {

package/tailwind/audit-token-drift.cjs

@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+/**
+ * Token drift audit for the Espresso v2 migration.
+ *
+ * Source of truth = the Figma export under espresso-v2-design-tokens/.
+ * Compares the resolved values of every themed token (surface/ink/outline)
+ * against a baseline git ref, and against the Figma token set, then reports:
+ *
+ *   1. BUILD-BREAKING — a token whose color ref no longer resolves (missing shade).
+ *   2. SILENT DRIFT   — token kept, but its resolved hex changed baseline -> HEAD.
+ *                       Catches BOTH mapping drift (ref points elsewhere) and
+ *                       primitive drift (same ref, shade hex moved, e.g. the
+ *                       surface-white / gray-900 #0f0f0f -> #1f1f1f case).
+ *   3. LEGACY         — token present in code but absent from the Figma export.
+ *                       Deprecation candidate; we suggest a replacement by
+ *                       matching resolved hex against live Figma tokens.
+ *
+ * Usage:  node tailwind/audit-token-drift.js [baselineRef]
+ *         baselineRef defaults to v0.1.278
+ */
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+const ROOT = path.resolve(__dirname, '..')
+const BASELINE = process.argv[2] || 'v0.1.278'
+const GROUPS = ['surface', 'ink', 'outline']
+const MODES = ['light', 'dark']
+
+function loadJSON(p) {
+  return JSON.parse(fs.readFileSync(path.join(ROOT, p), 'utf8'))
+}
+function loadFromRef(ref, p) {
+  try {
+    return JSON.parse(execSync(`git show ${ref}:${p}`, { cwd: ROOT }).toString())
+  } catch (e) {
+    return null
+  }
+}
+
+// Resolve a color ref like "lightMode/gray/900" or "neutral/white" to a hex.
+// Returns { hex } on success or { missing: ref } when the shade is absent.
+function resolveRef(ref, palette) {
+  if (typeof ref !== 'string') return { hex: null }
+  const parts = ref.split('/')
+  let node = palette
+  for (const part of parts) {
+    if (node && typeof node === 'object' && part in node) node = node[part]
+    else return { missing: ref }
+  }
+  if (typeof node === 'string') return { hex: node.toLowerCase() }
+  return { missing: ref }
+}
+
+// All themed tokens resolved to hex for a given colors.json object.
+function resolveAll(colors) {
+  const out = {}
+  for (const mode of MODES) {
+    for (const group of GROUPS) {
+      const map = colors?.themedVariables?.[mode]?.[group] || {}
+      for (const key of Object.keys(map)) {
+        const id = `${mode}.${group}.${key}`
+        out[id] = { ref: map[key], ...resolveRef(map[key], colors) }
+      }
+    }
+  }
+  return out
+}
+
+// Figma semantic token keys per group (union of Light + Dark styles).
+function figmaKeySet() {
+  const fl = loadJSON('espresso-v2-design-tokens/Styles.Light.tokens.json')
+  const fd = loadJSON('espresso-v2-design-tokens/Styles.Dark.tokens.json')
+  const set = {}
+  for (const g of GROUPS) {
+    set[g] = new Set([...Object.keys(fl[g] || {}), ...Object.keys(fd[g] || {})])
+  }
+  return set
+}
+
+// Count usages of a `${prefix}-${key}` token across src/ Tailwind classes.
+function usageCount(group, key) {
+  const prefix = { surface: 'bg-surface', ink: 'text-ink', outline: '(border|ring|outline)-outline' }[group]
+  const pattern = `\\b(${prefix})-${key}\\b`
+  try {
+    const out = execSync(
+      `grep -rhoE '${pattern}' src 2>/dev/null | wc -l`,
+      { cwd: ROOT },
+    ).toString().trim()
+    return parseInt(out, 10) || 0
+  } catch {
+    return 0
+  }
+}
+
+function main() {
+  const headColors = loadJSON('tailwind/colors.json')
+  const baseColors = loadFromRef(BASELINE, 'tailwind/colors.json')
+  const head = resolveAll(headColors)
+  const base = baseColors ? resolveAll(baseColors) : null
+  const figma = figmaKeySet()
+
+  const broken = []
+  const drift = []
+  const legacy = []
+
+  // Build a hex -> figma token index for replacement suggestions.
+  const hexToFigma = {}
+  for (const id of Object.keys(head)) {
+    const [, group, key] = id.split('.')
+    if (figma[group].has(key) && head[id].hex) {
+      ;(hexToFigma[head[id].hex] ||= new Set()).add(`${group}.${key}`)
+    }
+  }
+
+  for (const id of Object.keys(head)) {
+    const [, group, key] = id.split('.')
+    const h = head[id]
+
+    if (h.missing) broken.push({ id, ref: h.missing })
+
+    if (base && base[id] && base[id].hex && h.hex && base[id].hex !== h.hex) {
+      const sameRef = base[id].ref === h.ref
+      drift.push({
+        id,
+        from: base[id].hex,
+        to: h.hex,
+        kind: sameRef ? 'primitive' : 'mapping',
+        refFrom: base[id].ref,
+        refTo: h.ref,
+      })
+    }
+
+    if (!figma[group].has(key)) {
+      const suggestions = [...(hexToFigma[h.hex] || [])].filter((s) => s !== `${group}.${key}`)
+      legacy.push({ id, group, key, hex: h.hex, uses: usageCount(group, key), suggestions })
+    }
+  }
+
+  const seenLegacy = new Set()
+  const dedupLegacy = legacy.filter((l) => {
+    const k = `${l.group}.${l.key}`
+    if (seenLegacy.has(k)) return false
+    seenLegacy.add(k)
+    return true
+  })
+
+  console.log(`# Token Drift Audit — baseline ${BASELINE} -> HEAD\n`)
+
+  console.log(`## 1. Build-breaking (ref no longer resolves) — ${broken.length}\n`)
+  if (!broken.length) console.log('_none_\n')
+  for (const b of broken) console.log(`- \`${b.id}\` → missing shade \`${b.ref}\``)
+
+  console.log(`\n## 2. Silent drift (resolved hex changed) — ${drift.length}\n`)
+  if (!base) console.log(`_baseline ${BASELINE} not available_\n`)
+  else if (!drift.length) console.log('_none_\n')
+  else {
+    console.log('| token | kind | from | to | ref change |')
+    console.log('| --- | --- | --- | --- | --- |')
+    for (const d of drift) {
+      const refCol = d.kind === 'mapping' ? `${d.refFrom} → ${d.refTo}` : d.refTo
+      console.log(`| \`${d.id}\` | ${d.kind} | ${d.from} | ${d.to} | ${refCol} |`)
+    }
+  }
+
+  console.log(`\n## 3. Legacy tokens (in code, absent from Figma) — ${dedupLegacy.length}\n`)
+  console.log('| token | hex | uses in src | suggested replacement (same hex) |')
+  console.log('| --- | --- | --- | --- |')
+  for (const l of dedupLegacy.sort((a, b) => b.uses - a.uses)) {
+    console.log(
+      `| \`${l.group}.${l.key}\` | ${l.hex || '?'} | ${l.uses} | ${l.suggestions.join(', ') || '—'} |`,
+    )
+  }
+}
+
+main()