@livestorm/ui-vue 1.1.3 → 2.0.1

package/package.json

@@ -1,86 +1,153 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "1.1.3",
+  "version": "2.0.1",
   "description": "Livestorm UI components for Vue 3",
-  "scripts": {
-    "build": "vite build",
-    "test": "pnpm run test:eslint && pnpm run test:vitest:run",
-    "test:eslint": "vue-cli-service lint --no-fix",
-    "test:types": "vue-tsc --noEmit -p ./tsconfig.check.json",
-    "test:vitest": "vitest",
-    "test:vitest:run": "vitest run",
-    "prepublishOnly": "pnpm run test && pnpm run build"
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livestorm/entropy.git",
+    "directory": "packages/ui-vue"
   },
-  "main": "./dist/ui-vue.umd.js",
-  "module": "./dist/ui-vue.mjs",
-  "types": "./index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.spec.*",
+    "!src/**/*.stories.*",
+    "!src/**/*.mdx",
+    "!src/**/__tests__",
+    "!src/**/__screenshots__",
+    "!src/**/stories",
+    "index.js",
+    "index.d.ts",
+    "components-vite.js",
+    "components.d.ts",
+    "integrations.d.ts",
+    "theme.d.ts",
+    "style.js"
+  ],
   "dependencies": {
-    "@livestorm/design-tokens": "^2.0.1",
-    "@livestorm/ui-icons": "workspace:^",
-    "@vueuse/core": "^9.0.2",
-    "core-js": "^3.29.1",
-    "floating-vue": "^2.0.0-beta.20",
-    "i18next": "^20.3.2",
-    "mitt": "^3.0.0",
-    "tailwindcss": "^3.0.24",
-    "vue-safe-teleport": "^0.1.2"
+    "@lottiefiles/dotlottie-vue": "^0.11.16",
+    "@tanstack/vue-form": "^1.33.0",
+    "@vueuse/core": "^14.3.0",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-vue": "^8.6.0",
+    "i18next": "^26.3.4",
+    "mitt": "^3.0.1",
+    "reka-ui": "2.9.10",
+    "tailwindcss": "^4.3.2",
+    "vue-safe-teleport": "^0.1.2",
+    "@livestorm/ui-icons": "^2.0.1",
+    "@livestorm/ui-tokens": "^2.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/eslint-parser": "^7.19.1",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vitest/ui": "^0.25.2",
-    "@vue/cli-plugin-babel": "^5.0.1",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.47",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.26.0",
-    "eslint-plugin-vitest-globals": "^1.2.0",
-    "eslint-plugin-vue": "^9.6.0",
-    "jsdom": "^21.1.0",
-    "postcss": "^8.4.14",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.9",
-    "vitest": "^0.25.2",
-    "vue": "^3.3.4",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24"
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-coverage": "^3.0.1",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/vue3-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.3.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/ui": "^4.1.9",
+    "@vue/test-utils": "^2.4.11",
+    "chromatic": "^15.3.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-storybook": "^10.4.6",
+    "happy-dom": "^20.10.6",
+    "playwright": "^1.61.1",
+    "storybook": "^10.4.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.9",
+    "vitest-browser-vue": "^2.1.0",
+    "vue": "^3.5.39",
+    "vue-router": "^5.1.0",
+    "vue-tsc": "^3.3.5",
+    "@livestorm/dev-utils": "1.0.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.4",
-    "vue-router": "^4.1.6"
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.3"
   },
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.mjs"
     },
-    "./components": {
+    "./theme": {
+      "types": "./dist/types/src/theme.d.ts"
+    },
+    "./style": "./dist/ui-vue.css",
+    "./components-vite": {
       "types": "./components.d.ts",
       "import": "./dist/components.mjs"
     },
-    "./postcss": {
-      "types": "./style-postcss.d.ts",
-      "import": "./style-postcss.js"
+    "./bus": {
+      "types": "./dist/types/src/utils/bus.d.ts",
+      "import": "./dist/bus.mjs"
+    },
+    "./responsive": {
+      "types": "./dist/types/src/utils/responsive.d.ts",
+      "import": "./dist/responsive.mjs"
+    },
+    "./breakpoints": {
+      "types": "./dist/types/src/utils/breakpoints.d.ts",
+      "import": "./dist/breakpoints.mjs"
+    },
+    "./slot": {
+      "types": "./dist/types/src/utils/slot.d.ts",
+      "import": "./dist/slot.mjs"
+    },
+    "./utils": {
+      "types": "./dist/types/src/utils/index.d.ts",
+      "import": "./dist/utils.mjs"
+    },
+    "./integrations": {
+      "types": "./dist/types/src/integrations/index.d.ts",
+      "import": "./dist/integrations.mjs"
+    },
+    "./layouts": {
+      "types": "./dist/types/src/layouts/index.d.ts",
+      "import": "./dist/layouts.mjs"
     },
-    "./style": "./style.js",
-    "./components-vite": "./components-vite.js",
-    "./components-webpack": "./components-webpack.js",
-    "./bus": "./src/utils/bus.js",
-    "./responsive": "./src/utils/responsive.js",
-    "./breakpoints": "./src/utils/breakpoints.js",
-    "./slot": "./src/utils/slot.js",
-    "./utils": "./src/utils/index.js",
-    "./tailwind.config": "./tailwind.config.base.cjs",
     "./*": "./*"
   },
+  "engines": {
+    "node": "^24.13.1"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run build:types",
+    "build:types": "vue-tsc -p ./tsconfig.build.json",
+    "build:watch": "vite build --watch",
+    "generate:types": "node scripts/generate-global-types.js",
+    "test:eslint": "eslint \"**/*.{js,jsx,ts,tsx,vue}\"",
+    "test:eslint:fix": "eslint \"**/*.{js,jsx,ts,tsx,vue}\" --fix",
+    "test:types": "vue-tsc --noEmit -p ./tsconfig.check.json",
+    "pretest:vitest": "pnpm exec playwright install --with-deps chromium",
+    "test:vitest": "vitest run",
+    "test:vitest:ui": "vitest --ui",
+    "test:vitest:watch": "vitest watch",
+    "test:vitest:ci": "NODE_ENV=ci vitest run",
+    "test:vitest:updateSnapshots": "vitest -u",
+    "test:npm-package": "bash tests/npm-package/run.sh",
+    "npm-package:gallery": "bash tests/npm-package/run.sh --gallery",
+    "deploy:chromatic": "npx chromatic",
+    "setup-reka-paths": "node setup-reka-ui-paths.js",
+    "storybook:dev": "pnpm run setup-reka-paths && storybook dev -p 6006",
+    "storybook:build": "storybook build --stats-json"
   }
-}
+}

package/src/components/Toast/LayoutToasts.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
+import type { ResponsiveGlobalComponentProperty } from '../../utils/responsive.types'
+import { useToasts, type ToastOptions } from './toastDSV2'
+import ToastMessage from './ToastMessage.vue'
+
+const app = getCurrentInstance()
+if (!app) {
+  throw new Error('No current instance found')
+}
+const responsive = computed(() => app.appContext.config.globalProperties.$responsive as ResponsiveGlobalComponentProperty)
+
+const MAX_ITEMS_DISPLAYED = 3
+
+const { toasts, closeToast, cancelCloseTimer, openToast } = useToasts()
+
+const hasLockedToast = computed(() => toasts.value.some(toast => toast.locked))
+
+function onBeforeLeave (el: Element) {
+  const bounds = el.getBoundingClientRect()
+  const { style } = el as HTMLElement
+  style.top = `${bounds.top}px`
+  style.left = `${bounds.left}px`
+  style.width = `${bounds.width}px`
+  style.height = `${bounds.height}px`
+}
+</script>
+
+<template>
+  <transition
+    :duration="200"
+    appear
+  >
+    <div
+      v-if="hasLockedToast"
+      data-testid="layout-toasts-locked"
+      class="bg-alpha-black-300 fixed inset-0 z-[8000]"
+    />
+  </transition>
+  <TransitionGroup
+    name="list"
+    tag="div"
+    :class="!responsive?.mobile ? 'm-8 max-w-md w-full' : 'm-4 right-0'"
+    class="fixed left-0 bottom-0 flex flex-col gap-2 z-max"
+    @before-leave="onBeforeLeave"
+  >
+    <div
+      v-for="item of toasts.slice(0, MAX_ITEMS_DISPLAYED)"
+      :key="item.id"
+      class="w-full sm:max-w-[400px]"
+    >
+      <ToastMessage
+        v-bind="item"
+        class="bg-surface-neutral-bg-main p-3 rounded-2xl"
+        @close="closeToast(item.id)"
+        @mouseenter="cancelCloseTimer(item.id)"
+        @mouseleave="item.time ? openToast({ id: item.id } as ToastOptions) : null"
+        @confirm="item.confirmEventHook.trigger(undefined)"
+        @cancel="item.cancelEventHook.trigger(undefined)"
+      />
+    </div>
+  </TransitionGroup>
+</template>

package/src/components/Toast/ToastMessage.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+// * The explicit import here helps the Storybook
+// * but prevents the frontend from UiButton.
+// * We either have the frontend app working or the Storybook working.
+// import UiButton from '../UiButton/UiButton.vue'
+
+import type { ToastOptions } from './toastDSV2'
+import useThemeAndModes from '../../composables/useThemeAndModes'
+
+type ToastMessageProps = Partial<ToastOptions>
+
+const props = withDefaults(defineProps<ToastMessageProps>(), {
+  type: 'info',
+  locked: false,
+  closable: true,
+  confirmHrefTarget: '_blank',
+})
+
+const emit = defineEmits([
+  'close',
+  'confirm',
+  'cancel',
+  'mouseenter',
+  'mouseleave',
+])
+
+// @todo: make composable function since also used for modal icon
+const modalIcon = computed(() => {
+  if (props.customIcon) return props.customIcon
+
+  switch (props.type) {
+    case 'alert':
+      return 'i-ls-x-circle !text-text-danger-base'
+    case 'warning':
+      return 'i-ls-alert-triangle !text-text-warning-base'
+    case 'info':
+      return 'i-ls-info text-text-primary-base'
+    case 'success':
+      return 'i-ls-check-circle text-text-success-base'
+    default:
+      return undefined
+  }
+})
+
+const startTimer = ref(false)
+const hovered = ref(false)
+
+const enableProgressBar = computed(() => props.progessIndeterminate || (props.time && ['success', 'info'].includes(props.type)))
+
+function onMouseleave () {
+  hovered.value = false
+  emit('mouseleave')
+
+  // Reset the progress bar animation
+  if (props.time) {
+    startTimer.value = false
+
+    setTimeout(() => {
+      startTimer.value = true
+    }, 100)
+  }
+}
+
+if (props.time) {
+  // The delay is used to trigger the CSS transition
+  setTimeout(() => {
+    startTimer.value = true
+  }, 100)
+}
+
+const Toast = ref<HTMLElement | undefined>()
+const { addElementToWatch } = useThemeAndModes()
+onMounted(() => {
+  if (Toast.value) {
+    addElementToWatch(
+      'content',
+      {
+        selector: '[data-name="ui-toast-message"]',
+        element: Toast.value,
+        modeOverride: 'light',
+      })
+  }
+})
+</script>
+
+<template>
+  <div
+    class=" relative grid grid-flow-col grid-rows-[auto_auto_auto] sm:grid-rows-1 sm:grid-cols-[auto_1fr_auto] items-start p-4 bg-surface-neutral-bg-main shadow-shadows-drop-shadow-lg rounded-xl gap-x-0 overflow-hidden"
+    :data-testid="`toast-message-${String(id)}`"
+    data-colors-semantic="light"
+    data-name="ui-toast-message"
+    @mouseenter="hovered = true, emit('mouseenter')"
+    @mouseleave="onMouseleave"
+  >
+    <div
+      v-if="props.component"
+      ref="Toast"
+      class="flex-1 min-w-0"
+    >
+      <component
+        :is="{...props.component}"
+        v-bind="props.componentProps"
+      />
+    </div>
+    <template v-else>
+      <!-- TODO: handle DSV2 tokens -->
+      <template v-if="enableProgressBar">
+        <div
+          v-if="time"
+          ref="Toast"
+          class="absolute opacity-100 transition-opacity duration-300 h-1 bg-grey-100 top-0 left-0 w-full"
+          :class="{
+            'opacity-0!': hovered
+          }"
+        >
+          <div
+            v-if="time"
+            class="h-full w-0 ease-linear duration-1000"
+            :class="[startTimer ? 'w-full transition-all': 'transition-none', {
+              'bg-green-600': props.type === 'success',
+              'bg-livestorm-600': props.type === 'info'
+            }]"
+            :style="{
+              transitionDuration: `${(props.time as number)/1000}s`
+            }"
+          />
+        </div>
+        <div
+          v-else-if="props.progessIndeterminate"
+          class="absolute h-1 bg-grey-100 top-0 left-0 w-full"
+        >
+          <div class="animate-progress-indeterminate w-full h-full bg-red-600 origin-left-right" />
+        </div>
+      </template>
+
+      <div class="shrink-0">
+        <div
+          v-if="modalIcon"
+          class="w-4 h-4 mt-0.5 mr-3 shrink-0 mb-2 sm:mb-0"
+          :class="modalIcon"
+        />
+      </div>
+      <div class="flex flex-col flex-1 sm:row-start-1 min-w-0 wrap-break-word">
+        <span
+          v-if="props.title || props.message"
+          class="text-content-text-md-bold text-text-neutral-base"
+        >{{ props.title || props.message }}</span>
+        <p
+          v-if="props.title && props.message"
+          class="text-content-text-md-regular"
+        >
+          {{ props.message }}
+        </p>
+        <p
+          v-if="props.info"
+          class="text-content-text-md-regular text-text-neutral-subtle mt-1"
+        >
+          {{ props.info }}
+        </p>
+      </div>
+    </template>
+
+    <div class="row-start-1 h-4 w-8 justify-self-end">
+      <UiButton
+        v-if="!props.locked && props.closable"
+        :data-testid="`toast-close-${String(props.id)}`"
+        color="neutral"
+        variant="tertiary"
+        icon="i-ls-x"
+        size="md"
+        aria-label="close"
+        class="-top-[10px] -right-[2px] sm:row-start-1"
+        @click="emit('close')"
+        @keydown.enter="emit('close')"
+      />
+    </div>
+
+    <div
+      v-if="props.confirmLabel || props.cancelLabel"
+      class="row-start-3 col-start-1 col-end-3 w-full grid sm:flex sm:col-start-2 mt-3 gap-2 justify-self-end"
+    >
+      <UiButton
+        v-if="props.confirmLabel"
+        :href="props.confirmHref"
+        :to="props.confirmTo"
+        :target="props.confirmHrefTarget"
+        :icon="props.confirmIcon"
+        color="primary"
+        variant="cta"
+        class="w-full sm:w-auto"
+        @click="$emit('confirm', $event)"
+      >
+        {{ props.confirmLabel }}
+      </UiButton>
+
+      <UiButton
+        v-if="props.cancelLabel"
+        color="neutral-invert"
+        variant="cta"
+        class="w-full sm:w-auto"
+        @click="$emit('cancel')"
+      >
+        {{ props.cancelLabel }}
+      </UiButton>
+    </div>
+  </div>
+</template>

package/src/components/Toast/toastDSV2.ts

@@ -0,0 +1,151 @@
+import { ref } from 'vue'
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { createEventHook, type EventHook } from '@vueuse/core'
+
+import type { ThemeColorType } from '../../theme'
+
+let uid = 1
+
+export type ToastType = 'alert'|'warning'|'info'|'success'
+
+const DEFAULT_TIMER_DURATION_PER_TYPE: Record<Extract<ToastType, 'success'|'info'>, number> = {
+  success: 3 * 1000,
+  info: 7 * 1000,
+}
+
+export interface ToastOptions {
+  message: string
+  id?: PropertyKey
+  title?: string
+  info?: string
+  type?: ThemeColorType
+  time?: number | boolean // if time is explicitly false, the toast will not auto-close
+  progessIndeterminate?: boolean
+  customIcon?: string
+  confirmLabel?: string
+  confirmHref?: string
+  confirmHrefTarget?: '_blank'|'_self'
+  confirmTo?: RouteLocationRaw
+  confirmIcon?: string
+  confirmColor?: ThemeColorType
+  cancelLabel?: string
+  locked?: boolean
+  closable?: boolean
+  component?: Component
+  componentProps?: Record<string, unknown>
+}
+
+interface ToastItem {
+  id: PropertyKey
+  message: string
+  title?: string
+  info?: string
+  type?: ThemeColorType
+  icon?: string
+  time?: number
+  locked?: boolean
+  progessIndeterminate?: boolean
+  closeTimer: any
+  confirmEventHook: EventHook
+  cancelEventHook: EventHook
+}
+
+const toasts = ref<ToastItem[]>([])
+
+export function useToasts () {
+  return {
+    toasts,
+    closeToast,
+    openToast,
+    cancelCloseTimer,
+  }
+}
+
+export function openToast (options: ToastOptions) {
+  let id: PropertyKey
+  let item = toasts.value.find(item => item.id === options.id)
+  const confirmEventHook = createEventHook<void>()
+  const cancelEventHook = createEventHook<void>()
+
+  if (item) {
+    id = item.id
+    Object.assign(item, {
+      ...options,
+    })
+
+    const restartTimer = options.id && Object.keys(options).length === 1
+    if (restartTimer) {
+      startTimer(item)
+    }
+  } else {
+    id = options.id ?? uid++
+
+    const type = options.type || 'info'
+    const typeWithTimer = type === 'success' || type === 'info'
+    // `true` picks the per-type default; a number is used as-is; `false`
+    // (or unset) means no auto-close — normalized to undefined so the timer
+    // is never started.
+    const time = options.time === true
+      ? (typeWithTimer ? DEFAULT_TIMER_DURATION_PER_TYPE[type] : undefined)
+      : (typeof options.time === 'number' ? options.time : undefined)
+    item = {
+      ...options,
+      id,
+      closeTimer: null,
+      confirmEventHook,
+      cancelEventHook,
+      time,
+      type,
+    }
+
+    toasts.value.push(item)
+
+    startTimer(item)
+  }
+
+  return {
+    id,
+    close: () => {
+      closeToast(id)
+    },
+    onConfirm: confirmEventHook.on,
+    onCancel: cancelEventHook.on,
+  }
+}
+
+export function closeToast (id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (item) {
+    clearTimeout(item.closeTimer)
+    removeToast(id)
+  }
+}
+
+export function cancelCloseTimer (id: PropertyKey) {
+  const item = toasts.value.find(item => item.id === id)
+  if (item) {
+    clearTimeout(item.closeTimer)
+  }
+}
+
+export function resetToasts () {
+  toasts.value = []
+}
+
+function removeToast (id: PropertyKey) {
+  const index = toasts.value.findIndex(item => item.id === id)
+  if (index !== -1) {
+    toasts.value.splice(index, 1)
+  }
+}
+
+function startTimer (item: ToastItem): void {
+  if (item.time) {
+    item.closeTimer = setTimeout(
+      () => {
+        closeToast(item.id)
+      }, item.time
+    )
+  }
+}