fix(stage-ui,ui): histoire wasn't configured correctly

packages/ui/src/composables/use-theme.ts

@@ -1,7 +1,12 @@
 import { useDark, useToggle } from '@vueuse/core'
 
+import { LocalStorageShim } from '../utils'
+
 const isDark = useDark({
   disableTransition: true,
+  // NOTICE: for histoire, used in packages/stage-ui, localStorage global variable exists but `storage.getItem is not a function` wil
+  // thrown, here we added LocalStorageShim to avoid this issue, and it will fallback to real localStorage when it's available.
+  storage: 'localStorage' in globalThis && localStorage != null && 'getItem' in localStorage && typeof localStorage.getItem === 'function' ? localStorage : new LocalStorageShim(),
 })
 
 const toggleDark = useToggle(isDark)

packages/ui/src/utils/index.ts

@@ -0,0 +1 @@
+export { LocalStorageShim } from './shim'

packages/ui/src/utils/shim/index.ts

@@ -0,0 +1 @@
+export { LocalStorageShim } from './local-storage'

packages/ui/src/utils/shim/local-storage.ts

@@ -0,0 +1,27 @@
+export class LocalStorageShim implements Storage {
+  private map = new Map<string, any>()
+
+  clear() {
+    this.map.clear()
+  }
+
+  getItem(key: string) {
+    return this.map.get(key) || null
+  }
+
+  key(index: number) {
+    return Array.from(this.map.keys())[index] || null
+  }
+
+  get length() {
+    return this.map.size
+  }
+
+  setItem(key: string, value: string) {
+    this.map.set(key, value)
+  }
+
+  removeItem(key: string) {
+    this.map.delete(key)
+  }
+}