@globalbrain/sefirot 3.39.2 → 3.40.1

package/lib/components/SErrorBoundary.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onErrorCaptured, ref } from 'vue'
+import { onErrorCaptured, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 const emit = defineEmits<{
   (e: 'error', value: any): void
 }>()
 
-const error = ref<Error | null>(null)
+const error = shallowRef<Error>()
 
 onErrorCaptured((e) => {
   if (import.meta.env.DEV) {
-    console.error(e)
+    console.error(e, { '[cause]': e?.cause })
   }
   if (!import.meta.env.SSR) {
     error.value = e
@@ -23,7 +23,7 @@ async function clearError(options: { redirect?: string } = {}) {
   if (options.redirect) {
     await useRouter().replace(options.redirect)
   }
-  error.value = null
+  error.value = undefined
 }
 </script>
 

package/lib/components/SGrid.vue

@@ -4,12 +4,14 @@ import { computed } from 'vue'
 const props = defineProps<{
   cols?: string | number
   gap?: string | number
+  gapRow?: string | number
+  gapCol?: string | number
 }>()
 
 const styles = computed(() => {
   return {
-    '--grid-template-columns': `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
-    '--gap': `${props.gap ?? 0}px`
+    '--grid-template-columns': `repeat(${props.cols || 1}, minmax(0, 1fr))`,
+    '--gap': `${props.gapRow || props.gap || 0}px ${props.gapCol || props.gap || 0}px`
   }
 })
 </script>

package/lib/components/STooltip.vue

@@ -2,7 +2,6 @@
 import { onKeyStroke } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 import { type Position, useTooltip } from '../composables/Tooltip'
-import SMarkdown from './SMarkdown.vue'
 
 const props = withDefaults(defineProps<{
   tag?: string
@@ -107,7 +106,7 @@ function onBlur() {
     <transition name="fade">
       <span v-show="on" class="container" :class="containerClasses" ref="tip">
         <span v-if="$slots.text" class="tip"><slot name="text" /></span>
-        <SMarkdown v-else-if="text" tag="span" class="tip" :content="text" inline />
+        <span v-else-if="text" class="tip" v-html="text" />
       </span>
     </transition>
   </component>

package/lib/composables/Error.ts

@@ -0,0 +1,211 @@
+/**
+ * Adapted from
+ * @see https://github.com/vuejs/core/blob/76c9c742e9b045d1342f5952866972498e59f00b/packages/runtime-core/src/component.ts
+ * @see https://github.com/vuejs/core/blob/bc37258caa2f6f67f4554ab8587aca3798d92124/packages/runtime-core/src/warning.ts
+ * @see https://github.com/getsentry/sentry-javascript/blob/2cfb0ef3fa5c40f90c317267a4d10b969994d021/packages/vue/src/errorhandler.ts
+ *
+ * Original licenses:
+ *
+ * (c) 2018-present Yuxi (Evan) You and Vue contributors
+ * @license MIT
+ *
+ * (c) 2019 Sentry (https://sentry.io) and individual contributors
+ * @license MIT
+ */
+
+import * as Sentry from '@sentry/browser'
+import { pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ComponentPublicInstance,
+  type ConcreteComponent,
+  type MaybeRefOrGetter,
+  type VNode,
+  toValue
+} from 'vue'
+import { useError } from '../stores/Error'
+import { isFunction } from '../support/Utils'
+
+export interface User {
+  id?: string | number
+  email?: string
+  username?: string
+}
+
+type TraceEntry = { vnode: VNode; recurseCount: number }
+
+type ComponentTraceStack = TraceEntry[]
+
+const classifyRE = /(?:^|[-_])(\w)/g
+function classify(str: string): string {
+  return str.replace(classifyRE, (c) => c.toUpperCase()).replace(/[-_]/g, '')
+}
+
+function getComponentName(Component: ConcreteComponent): string | undefined {
+  return isFunction(Component)
+    ? Component.displayName || Component.name
+    : Component.name || Component.__name
+}
+
+function formatComponentName(instance: ComponentInternalInstance | null): string {
+  if (!instance) {
+    return 'Anonymous'
+  }
+
+  const Component = instance.type
+  const isRoot = instance.parent == null
+
+  let name = getComponentName(Component)
+  if (!name && Component.__file) {
+    const match = Component.__file.match(/([^/\\]+)\.\w+$/)
+    if (match) {
+      name = match[1]
+    }
+  }
+
+  if (!name && instance && instance.parent) {
+    const inferFromRegistry = (registry: Record<string, unknown> | undefined) => {
+      for (const key in registry) {
+        if (registry[key] === Component) {
+          return key
+        }
+      }
+    }
+    name
+      = inferFromRegistry(
+        // @ts-expect-error internal api
+        instance.components || (instance.parent.type as ComponentOptions).components
+      ) || inferFromRegistry(instance.appContext.components)
+  }
+
+  return name ? classify(name) : isRoot ? 'App' : 'Anonymous'
+}
+
+function getComponentTrace(currentVNode: VNode | null): ComponentTraceStack {
+  if (!currentVNode) {
+    return []
+  }
+
+  const normalizedStack: ComponentTraceStack = []
+
+  while (currentVNode) {
+    const last = normalizedStack[0]
+    if (last && last.vnode === currentVNode) {
+      last.recurseCount++
+    } else {
+      normalizedStack.push({ vnode: currentVNode, recurseCount: 0 })
+    }
+    const parentInstance: ComponentInternalInstance | null
+      = currentVNode.component && currentVNode.component.parent
+    currentVNode = parentInstance && parentInstance.vnode
+  }
+
+  return normalizedStack
+}
+
+function formatTrace(instance: ComponentInternalInstance | null): string {
+  return getComponentTrace(instance && instance.vnode)
+    .map(formatTraceEntry)
+    .join('\n')
+}
+
+function formatTraceEntry({ vnode, recurseCount }: TraceEntry): string {
+  return `at <${formatComponentName(vnode.component)}${
+    vnode.props ? ` ${formatProps(vnode.props)}` : ''
+  }>${
+    recurseCount > 0 ? ` ... (${recurseCount} recursive call${recurseCount > 1 ? 's' : ''})` : ''
+  }`
+}
+
+function formatProps(props: Record<string, unknown>): string {
+  return Object.keys(props)
+    .map((key) => {
+      let value = props[key]
+      if (typeof value === 'string') {
+        value = JSON.stringify(value)
+        return `${key}=${value}`
+      } else if (typeof value === 'function') {
+        return `:${key}="fn${value.name ? `<${value.name}>` : ''}"`
+      } else if (typeof value !== 'object' || value === null) {
+        return `:${key}="${String(value)}"`
+      } else {
+        return `${key}="..."`
+      }
+    })
+    .join(' ')
+}
+
+export function useErrorHandler({
+  dsn,
+  environment,
+  user
+}: {
+  dsn?: string
+  environment?: string
+  user?: MaybeRefOrGetter<User | null>
+}) {
+  const error = useError()
+
+  const enabled = !!dsn && import.meta.env.PROD
+
+  // No need to manually report these errors as they are automatically
+  // captured by Sentry. And skip registering these in SSR. We can't use
+  // onMounted because it's not available outside component lifecycle.
+  if (typeof document !== 'undefined') {
+    addEventListener('error', (event) => {
+      error.set(event.error)
+    })
+    addEventListener('unhandledrejection', (event) => {
+      error.set(event.reason)
+    })
+  }
+
+  if (enabled) {
+    Sentry.init({
+      dsn,
+      environment,
+      ignoreErrors: [
+        'ResizeObserver loop limit exceeded',
+        'ResizeObserver loop completed with undelivered notifications'
+      ]
+    })
+  }
+
+  return function errorHandler(
+    error: any,
+    instance: ComponentPublicInstance | null = null,
+    info: string = ''
+  ) {
+    error.set(error)
+
+    if (enabled) {
+      pauseTracking()
+
+      let userValue = toValue(user) || null
+      if (!userValue?.id && !userValue?.email && !userValue?.username) {
+        userValue = null
+      }
+
+      if (![403, 404].includes(error?.cause?.statusCode)) {
+        const $ = instance && instance.$
+        const metadata = $ && {
+          componentName: formatComponentName($),
+          lifecycleHook: info,
+          trace: formatTrace($),
+          propsData: $ && $.props
+        }
+
+        setTimeout(() => {
+          Sentry.withScope((scope) => {
+            scope.setUser(userValue)
+            scope.setContext('vue', metadata)
+            Sentry.captureException(error)
+          })
+        })
+      }
+
+      resetTracking()
+    }
+  }
+}

package/lib/errors/AuthorizationError.ts

@@ -0,0 +1,5 @@
+export class AuthorizationError extends Error {
+  constructor() {
+    super('Authorization failed', { cause: { statusCode: 403 } })
+  }
+}

package/lib/errors/PageNotFoundError.ts

@@ -0,0 +1,5 @@
+export class PageNotFoundError extends Error {
+  constructor() {
+    super('Page not found', { cause: { statusCode: 404 } })
+  }
+}

package/lib/errors/UnexpectedError.ts

@@ -0,0 +1,5 @@
+export class UnexpectedError extends Error {
+  constructor() {
+    super('Unexpected error occurred', { cause: { statusCode: 500 } })
+  }
+}

package/lib/errors/index.ts

@@ -0,0 +1,3 @@
+export { AuthorizationError } from './AuthorizationError'
+export { PageNotFoundError } from './PageNotFoundError'
+export { UnexpectedError } from './UnexpectedError'

package/lib/stores/Error.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const useError = defineStore('sefirot-error', () => {
+  const data = shallowRef<unknown>()
+
+  function set(err: unknown): void {
+    data.value = err
+  }
+
+  async function clear(options: { redirect?: string } = {}): Promise<void> {
+    if (options.redirect) {
+      await useRouter().replace(options.redirect)
+    }
+    data.value = undefined
+  }
+
+  return {
+    data,
+    set,
+    clear
+  }
+})

package/lib/stores/Snackbars.ts

@@ -17,7 +17,7 @@ export interface SnackbarAction {
   onClick(): void
 }
 
-export const useSnackbars = defineStore('snackbars', () => {
+export const useSnackbars = defineStore('sefirot-snackbars', () => {
   const maxItemSize = 4
 
   let nextId = 0

package/lib/support/Utils.ts

@@ -21,3 +21,8 @@ export function isObject(value: unknown): value is Record<string, any> {
 export function isFile(value: unknown): value is File {
   return value instanceof File
 }
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction(value: unknown): value is Function {
+  return typeof value === 'function'
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.39.2",
-  "packageManager": "pnpm@8.15.4",
+  "version": "3.40.1",
+  "packageManager": "pnpm@8.15.5",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -45,35 +45,37 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
+    "@vue/reactivity": "^3.4.21",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.8.0",
+    "@vueuse/core": "^10.9.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.20",
+    "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
   "dependencies": {
+    "@sentry/browser": "^8.0.0-alpha.7",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.0",
     "@tinyhttp/cookie": "^2.1.0",
     "@types/file-saver": "^2.0.7",
-    "@types/qs": "^6.9.11",
+    "@types/qs": "^6.9.14",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
-    "ofetch": "^1.3.3",
-    "qs": "^6.11.2"
+    "ofetch": "^1.3.4",
+    "qs": "^6.12.0"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.16.5",
+    "@globalbrain/eslint-config": "^1.6.0",
+    "@histoire/plugin-vue": "^0.17.14",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -81,32 +83,33 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.11.30",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.3.1",
-    "@vue/test-utils": "^2.4.4",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vue/reactivity": "^3.4.21",
+    "@vue/test-utils": "^2.4.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.8.0",
+    "@vueuse/core": "^10.9.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "eslint": "^8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^13.6.0",
-    "histoire": "^0.16.5",
+    "happy-dom": "^14.3.9",
+    "histoire": "^0.17.14",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
     "release-it": "^17.1.1",
-    "typescript": "~5.3.3",
+    "typescript": "~5.4.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.1.4",
-    "vitepress": "1.0.0-rc.44",
-    "vitest": "^1.3.1",
-    "vue": "^3.4.20",
+    "vite": "^5.2.6",
+    "vitepress": "1.0.1",
+    "vitest": "^1.4.0",
+    "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27"
   }