@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/shared/components/notification-dropdown/_internal/notification/notification.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="vc-notification-item"
-    @click="handleClick"
-  >
-    <div
-      v-if="notification.isNew"
-      class="vc-notification-item__unread-dot"
-    />
-    <div class="vc-notification-item__content">
-      <component
-        :is="currentTemplate"
-        v-if="currentTemplate"
-        v-bind="templateProps"
-      />
-      <NotificationTemplate
-        v-else
-        :title="notification.title ?? ''"
-        :notification="notification"
-      >
-        <VcHint
-          v-if="notification.description"
-          class="tw-mb-1"
-        >
-          {{ notification.description }}
-        </VcHint>
-      </NotificationTemplate>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { PushNotification } from "@core/api/platform";
-import { NotificationTemplateConstructor } from "@core/types";
-import { NotificationTemplate } from "@shared/components/notification-template";
-
-export interface Props {
-  notification: PushNotification;
-  templates: NotificationTemplateConstructor[];
-}
-
-export interface Emits {
-  (event: "onClick", notification: PushNotification): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
-
-const templateProps = computed(() => ({
-  notification: props.notification,
-}));
-
-const handleClick = () => {
-  emit("onClick", props.notification);
-};
-</script>
-
-<style lang="scss">
-:root {
-  --notification-unread-dot-color: var(--primary-500);
-}
-
-.vc-notification-item {
-  @apply tw-flex tw-items-start tw-p-3 tw-w-full tw-gap-2 tw-cursor-pointer;
-
-  &__unread-dot {
-    @apply tw-w-2 tw-h-2 tw-rounded-full tw-shrink-0 tw-mt-1.5;
-    background-color: var(--notification-unread-dot-color);
-  }
-
-  &__content {
-    @apply tw-flex-1 tw-min-w-0;
-  }
-}
-</style>

package/shared/components/notification-dropdown/index.ts

@@ -1,10 +0,0 @@
-import _NotificationDropdown from "@shared/components/notification-dropdown/notification-dropdown.vue";
-
-export const NotificationDropdown = _NotificationDropdown as typeof _NotificationDropdown;
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    NotificationDropdown: typeof NotificationDropdown;
-  }
-}

package/shared/components/notification-dropdown/notification-dropdown.stories.ts

@@ -1,99 +0,0 @@
-import { defineComponent, provide } from "vue";
-import type { PropType } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import NotificationDropdown from "@shared/components/notification-dropdown/notification-dropdown.vue";
-import { NotificationTemplate } from "@shared/components/notification-template";
-import { useNotifications } from "@core/composables/useNotifications";
-import { NotificationTemplatesKey } from "@framework/injection-keys";
-import { PushNotification } from "@core/api/platform";
-import type { NotificationTemplateConstructor } from "@core/types";
-
-function seedStoryNotifications() {
-  const { addNotification } = useNotifications();
-
-  addNotification(
-    new PushNotification({
-      id: "story-notification-1",
-      notifyType: "OfferCreatedDomainEvent",
-      title: "Offer #1024 changed status",
-      description: "Published successfully",
-      isNew: false,
-      created: new Date(Date.now() - 1000 * 60 * 3),
-    }),
-  );
-
-  addNotification(
-    new PushNotification({
-      id: "story-notification-2",
-      notifyType: "SystemMessage",
-      title: "Catalog synchronization finished",
-      description: "12 products were updated.",
-      isNew: false,
-      created: new Date(Date.now() - 1000 * 60 * 40),
-    }),
-  );
-}
-
-const OfferNotificationTemplate = defineComponent({
-  name: "OfferNotificationTemplate",
-  components: { NotificationTemplate },
-  props: {
-    notification: {
-      type: Object as PropType<PushNotification>,
-      required: true,
-    },
-  },
-  template: `
-    <NotificationTemplate
-      :title="notification.title ?? ''"
-      :notification="notification"
-    >
-      <p class="tw-m-0 tw-text-xs tw-text-success-600">
-        Offer event: {{ notification.description }}
-      </p>
-    </NotificationTemplate>
-  `,
-}) as NotificationTemplateConstructor;
-
-OfferNotificationTemplate.notifyType = "OfferCreatedDomainEvent";
-
-const meta = {
-  title: "Shared/NotificationDropdown",
-  component: NotificationDropdown,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        seedStoryNotifications();
-      },
-      template: `
-        <div class="tw-w-[420px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-2">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Shell notification dropdown backed by `useNotifications()`. Story seeds shared notification state and demonstrates default/fallback and custom notify-type templates.",
-      },
-    },
-  },
-} satisfies Meta<typeof NotificationDropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultTemplateResolution: Story = {};
-
-export const WithCustomTemplate: Story = {
-  render: () => ({
-    components: { NotificationDropdown },
-    setup() {
-      provide(NotificationTemplatesKey, [OfferNotificationTemplate]);
-    },
-    template: `<NotificationDropdown />`,
-  }),
-};

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -1,40 +0,0 @@
-<template>
-  <VcDropdown
-    :model-value="true"
-    :items="notifications"
-    :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
-    max-height="auto"
-    :padded="false"
-    :close-on-click-outside="false"
-  >
-    <template #item="{ item }">
-      <NotificationItem
-        :notification="item"
-        :templates="notificationTemplates || []"
-      />
-    </template>
-  </VcDropdown>
-</template>
-
-<script lang="ts" setup>
-import { inject, onBeforeUnmount } from "vue";
-import NotificationItem from "@shared/components/notification-dropdown/_internal/notification/notification.vue";
-import { useI18n } from "vue-i18n";
-import { useNotifications } from "@core/composables";
-import { NotificationTemplatesSymbol } from "@framework/injection-keys";
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-
-const notificationTemplates = inject(NotificationTemplatesSymbol);
-
-const { t } = useI18n({ useScope: "global" });
-const { notifications, markAllAsRead } = useNotifications();
-
-// Mark notifications as read when the panel closes (unmounts),
-// so the user can see the unread state while browsing.
-onBeforeUnmount(() => {
-  if (notifications.value.some((x) => x.isNew)) {
-    markAllAsRead();
-  }
-});
-</script>
-

package/shared/components/notification-template/index.ts

@@ -1,10 +0,0 @@
-import _NotificationTemplate from "@shared/components/notification-template/notification-template.vue";
-
-export const NotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    NotificationTemplate: typeof NotificationTemplate;
-  }
-}

package/shared/components/notification-template/notification-template.stories.ts

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import type { IPushNotification } from "@core/api/platform";
-import NotificationTemplate from "@shared/components/notification-template/notification-template.vue";
-
-const now = Date.now();
-
-const makeNotification = (overrides: Partial<IPushNotification> = {}): IPushNotification => ({
-  id: "notification-story",
-  title: "Product was updated",
-  description: "Status changed to Published",
-  notifyType: "ProductCreatedDomainEvent",
-  isNew: true,
-  created: new Date(now - 2 * 60 * 1000),
-  ...overrides,
-});
-
-const meta = {
-  title: "Shared/NotificationTemplate",
-  component: NotificationTemplate,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      template: `
-        <div class="tw-w-[420px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  args: {
-    title: "Product \"Winter Sneakers\" updated",
-    notification: makeNotification(),
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Base template for push-notification rendering. Used by vendor-portal event components to display title, timestamp and optional details slot.",
-      },
-    },
-  },
-} satisfies Meta<typeof NotificationTemplate>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Recent: Story = {};
-
-export const WithDetailsSlot: Story = {
-  render: (args) => ({
-    components: { NotificationTemplate },
-    setup() {
-      return { args };
-    },
-    template: `
-      <NotificationTemplate v-bind="args">
-        <p class="tw-m-0 tw-text-xs tw-text-neutrals-600">
-          Seller profile: Sports & Outdoor. Click to open details blade.
-        </p>
-      </NotificationTemplate>
-    `,
-  }),
-};
-
-export const OneHourAgo: Story = {
-  args: {
-    title: "Offer approval required",
-    notification: makeNotification({
-      id: "notification-story-hour",
-      created: new Date(now - 60 * 60 * 1000),
-      description: "A manager needs to review this offer.",
-    }),
-  },
-};
-
-export const OldNotification: Story = {
-  args: {
-    title: "Order imported",
-    notification: makeNotification({
-      id: "notification-story-old",
-      created: new Date(now - 4 * 24 * 60 * 60 * 1000),
-      description: "Imported from external marketplace.",
-    }),
-  },
-};
-
-export const WithoutCreatedDate: Story = {
-  args: {
-    title: "Background sync completed",
-    notification: makeNotification({
-      id: "notification-story-no-date",
-      created: undefined,
-    }),
-  },
-};

package/shared/components/notification-template/notification-template.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="vc-notification-template" @click="$emit('click')">
-    <div
-      class="vc-notification-template__container"
-      :class="{
-        'vc-notification-template__container--mobile': $isMobile.value,
-      }"
-    >
-      <div class="vc-notification-template__content">
-        <p
-          class="vc-notification-template__title"
-          :class="{ 'vc-notification-template__title--desktop': $isDesktop.value }"
-        >
-          {{ title }}
-        </p>
-        <p class="vc-notification-template__time">
-          {{ pushTime }}
-        </p>
-        <div
-          v-if="$slots.default"
-          class="vc-notification-template__content-body"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { IPushNotification } from "@core/api/platform";
-
-export interface Props {
-  title: string;
-  notification: IPushNotification;
-}
-export interface Emits {
-  (e: "click"): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const locale = window.navigator.language;
-
-const MINUTE = 60;
-const HOUR = 3600;
-const DAY = 86400;
-
-const pushTime = computed(() => {
-  const created = props.notification.created;
-  if (!created) return "";
-
-  const date = created instanceof Date ? created : new Date(created);
-  if (Number.isNaN(date.getTime())) return "";
-  const now = Date.now();
-  const diffSec = Math.round((now - date.getTime()) / 1000);
-  const absDiffSec = Math.abs(diffSec);
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-
-  // Recent notifications: relative time
-  if (absDiffSec < MINUTE) {
-    return rtf.format(-diffSec, "second");
-  }
-  if (absDiffSec < HOUR) {
-    return rtf.format(-Math.round(diffSec / MINUTE), "minute");
-  }
-  if (absDiffSec < DAY) {
-    return rtf.format(-Math.round(diffSec / HOUR), "hour");
-  }
-
-  // Older notifications: absolute date-time
-  return new Intl.DateTimeFormat(locale, {
-    dateStyle: "short",
-    timeStyle: "short",
-  }).format(date);
-});
-</script>
-
-<style lang="scss">
-:root {
-  --notification-template-icon-color: var(--additional-50);
-  --notification-template-text-color: var(--additional-950);
-  --notification-template-time-color: var(--neutrals-500);
-  --notification-template-content-body-color: var(--neutrals-700);
-}
-
-.vc-notification-template {
-  @apply tw-w-full;
-
-  &__container {
-    @apply tw-flex tw-flex-row tw-justify-between tw-grow tw-basis-0;
-
-    &--mobile {
-      @apply tw-flex-col-reverse;
-    }
-  }
-
-  &__left {
-    @apply tw-flex tw-items-center;
-  }
-
-  &__icon-container {
-    @apply tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-[color:var(--notification-template-icon-color)]
-      tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0;
-  }
-
-  &__title {
-    @apply tw-text-[color:var(--notification-template-text-color)] tw-text-xs tw-leading-[19px]
-      tw-font-bold tw-m-0 tw-text-wrap;
-    word-break: break-word;
-  }
-
-  &__right {
-    @apply tw-flex tw-shrink-0;
-
-    &--mobile {
-      @apply tw-mb-2 tw-justify-end;
-    }
-  }
-
-  &__content-body {
-    @apply tw-text-xs tw-text-[color:var(--notification-template-content-body-color)] tw-m-0 tw-text-wrap;
-  }
-
-  &__time {
-    @apply tw-text-xxs tw-text-[color:var(--notification-template-time-color)] tw-m-0 tw-mb-2;
-  }
-}
-</style>

package/shared/components/notifications/components/index.ts

@@ -1 +0,0 @@
-export { default as NotificationContainer } from "@shared/components/notifications/components/notification-container";

package/shared/components/notifications/components/notification-container/index.ts

@@ -1,153 +0,0 @@
-import { VcToast } from "@ui/components/molecules/vc-toast";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { PropType, computed, defineComponent, h, ref, toRaw } from "vue";
-import { Content, NotificationType, NotificationPosition } from "@shared/components/notifications/types";
-import { useContainer } from "@shared/components/notifications/composables/useContainer";
-
-const NotificationContainer = defineComponent({
-  name: "NotificationContainer",
-  inheritAttrs: false,
-  props: {
-    pauseOnHover: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    timeout: {
-      type: [Number, Boolean],
-      required: false,
-      default: 3000,
-    },
-    content: {
-      type: [String, Object] as PropType<Content>,
-      required: false,
-      default: "",
-    },
-    notificationId: {
-      type: [String, Number],
-      required: false,
-      default: "",
-    },
-    updateId: {
-      type: [String, Number],
-      required: false,
-      default: "",
-    },
-    type: {
-      type: String as PropType<NotificationType>,
-      required: false,
-      default: "default",
-    },
-    onOpen: {
-      type: Function as PropType<<T>(payload: T) => void>,
-      required: false,
-      default: undefined,
-    },
-    onClose: {
-      type: Function as PropType<<T>(payload: T) => void>,
-      required: false,
-      default: undefined,
-    },
-    payload: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      type: [String, Object] as PropType<Record<string, any>>,
-      required: false,
-      default: () => ({}),
-    },
-    position: {
-      type: String as PropType<NotificationPosition>,
-      required: false,
-      default: "top-center",
-    },
-  },
-  setup(props) {
-    const { notificationContainers, actions } = useContainer();
-    const notificationsList = computed(() => {
-      return notificationContainers[props.position as NotificationPosition].value || [];
-    });
-
-    // Stacking: expand toasts on hover
-    const expanded = ref(false);
-
-    function isComponent(content: Content) {
-      return (
-        typeof content === "object" &&
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (!!(content as any)?.render || !!(content as any)?.setup)
-      );
-    }
-
-    // Called after VcToast finishes its exit transition — remove from the list directly
-    function handleClose(id: string | number | undefined) {
-      if (id) {
-        actions.remove(id);
-      }
-    }
-
-    function handleClearAll() {
-      actions.clear();
-    }
-
-    return () => {
-      const items = notificationsList.value;
-      const count = items.length;
-      const isExpanded = expanded.value || count <= 1;
-      const showClearAll = expanded.value && count > 1;
-
-      const children = items.map((item, index) => {
-        const toastProps = {
-          ...item,
-          key: item.notificationId,
-          onClose: handleClose,
-          toastIndex: index,
-          toastsCount: count,
-          expanded: isExpanded,
-        };
-
-        if (item.content && isComponent(item.content)) {
-          return h(VcToast, {
-            ...toastProps,
-            content: h(toRaw(item.content)),
-          });
-        }
-        return h(VcToast, toastProps);
-      });
-
-      // "Clear all" button below the stack
-      const clearAllButton = showClearAll
-        ? h("div", { class: "notification__clear-all" }, [
-            h(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearAll,
-              },
-              [
-                h(VcIcon, { icon: "lucide-x", size: "xs", "aria-hidden": "true" }),
-                "Clear all",
-              ],
-            ),
-          ])
-        : null;
-
-      // Wrap in a group div for hover-expand behavior
-      return h(
-        "div",
-        {
-          class: "notification__toast-group",
-          "data-expanded": String(isExpanded),
-          "data-position": props.position || "top-center",
-          onMouseenter: () => {
-            expanded.value = true;
-          },
-          onMouseleave: () => {
-            expanded.value = false;
-          },
-        },
-        [...children, clearAllButton],
-      );
-    };
-  },
-});
-
-export default NotificationContainer;

package/shared/components/notifications/composables/index.ts

@@ -1,2 +0,0 @@
-export { useContainer } from "@shared/components/notifications/composables/useContainer";
-export { useInstance } from "@shared/components/notifications/composables/useInstance";