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

package/shared/components/draggable-dashboard/composables/useGridstackAdapter.ts

@@ -1,245 +0,0 @@
-/**
- * Gridstack Type Adapter
- *
- * Converts between our IDashboardWidget types and Gridstack's GridStackWidget types.
- * Handles localStorage format migration for backwards compatibility.
- */
-
-import type { GridStackWidget, GridStackNode } from "gridstack";
-import type { IDashboardWidget, DashboardWidgetPosition, DashboardWidgetSize } from "@shared/components/draggable-dashboard/types";
-
-/**
- * LocalStorage key for layout persistence
- */
-export const LAYOUT_STORAGE_KEY = "vc-dashboard-layout";
-
-/**
- * Old localStorage format (Map serialized as object)
- */
-interface LegacyLayoutFormat {
-  [widgetId: string]: DashboardWidgetPosition;
-}
-
-/**
- * Converts our widget type to Gridstack widget format
- */
-export function toGridstackWidget(
-  widget: IDashboardWidget,
-  position?: DashboardWidgetPosition,
-): GridStackWidget {
-  const pos = position ?? widget.position;
-  return {
-    id: widget.id,
-    x: pos?.x ?? 0,
-    y: pos?.y ?? 0,
-    w: widget.size.width,
-    h: widget.size.height,
-    minW: 2,
-    minH: 2,
-  };
-}
-
-/**
- * Extracts position from Gridstack node
- */
-export function fromGridstackNode(node: GridStackNode): {
-  id: string;
-  position: DashboardWidgetPosition;
-  size: DashboardWidgetSize;
-} {
-  return {
-    id: node.id ?? "",
-    position: {
-      x: node.x ?? 0,
-      y: node.y ?? 0,
-    },
-    size: {
-      width: node.w ?? 1,
-      height: node.h ?? 1,
-    },
-  };
-}
-
-/**
- * Converts Gridstack nodes array to our layout Map format
- */
-export function gridstackNodesToLayoutMap(
-  nodes: GridStackNode[],
-): Map<string, DashboardWidgetPosition> {
-  const layout = new Map<string, DashboardWidgetPosition>();
-
-  for (const node of nodes) {
-    if (node.id) {
-      layout.set(node.id, {
-        x: node.x ?? 0,
-        y: node.y ?? 0,
-      });
-    }
-  }
-
-  return layout;
-}
-
-/**
- * Loads layout from localStorage with legacy format support
- */
-export function loadLayoutFromStorage(): Map<string, DashboardWidgetPosition> | null {
-  try {
-    const stored = localStorage.getItem(LAYOUT_STORAGE_KEY);
-    if (!stored) return null;
-
-    const parsed = JSON.parse(stored);
-
-    // Check if it's the new Gridstack array format
-    if (Array.isArray(parsed)) {
-      return gridstackNodesToLayoutMap(parsed as GridStackNode[]);
-    }
-
-    // Legacy format: object with widget IDs as keys
-    if (typeof parsed === "object" && parsed !== null) {
-      const layout = new Map<string, DashboardWidgetPosition>();
-      for (const [id, pos] of Object.entries(parsed as LegacyLayoutFormat)) {
-        if (pos && typeof pos.x === "number" && typeof pos.y === "number") {
-          layout.set(id, { x: pos.x, y: pos.y });
-        }
-      }
-      return layout;
-    }
-
-    return null;
-  } catch (error) {
-    console.warn("[GridstackAdapter] Failed to load layout from storage:", error);
-    return null;
-  }
-}
-
-/**
- * Saves layout to localStorage in Gridstack format
- */
-export function saveLayoutToStorage(
-  widgets: IDashboardWidget[],
-  layout: Map<string, DashboardWidgetPosition>,
-): void {
-  try {
-    const gridstackFormat: GridStackWidget[] = widgets.map((widget) => {
-      const pos = layout.get(widget.id);
-      return {
-        id: widget.id,
-        x: pos?.x ?? widget.position?.x ?? 0,
-        y: pos?.y ?? widget.position?.y ?? 0,
-        w: widget.size.width,
-        h: widget.size.height,
-      };
-    });
-
-    localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(gridstackFormat));
-  } catch (error) {
-    console.warn("[GridstackAdapter] Failed to save layout to storage:", error);
-  }
-}
-
-/**
- * Clears layout from localStorage
- */
-export function clearLayoutStorage(): void {
-  try {
-    localStorage.removeItem(LAYOUT_STORAGE_KEY);
-  } catch (error) {
-    console.warn("[GridstackAdapter] Failed to clear layout storage:", error);
-  }
-}
-
-/**
- * Auto-arrange widgets in a grid layout
- * Places widgets side by side when possible, wrapping to next row
- */
-function autoArrangeWidgets(
-  widgets: IDashboardWidget[],
-  columns: number = 12,
-): Map<string, DashboardWidgetPosition> {
-  const layout = new Map<string, DashboardWidgetPosition>();
-
-  // Track occupied cells in each row
-  const rowOccupancy: Map<number, number[]> = new Map();
-
-  const isPositionFree = (x: number, y: number, width: number, height: number): boolean => {
-    for (let row = y; row < y + height; row++) {
-      const occupied = rowOccupancy.get(row) || [];
-      for (let col = x; col < x + width; col++) {
-        if (occupied.includes(col)) return false;
-      }
-    }
-    return true;
-  };
-
-  const occupyPosition = (x: number, y: number, width: number, height: number): void => {
-    for (let row = y; row < y + height; row++) {
-      const occupied = rowOccupancy.get(row) || [];
-      for (let col = x; col < x + width; col++) {
-        occupied.push(col);
-      }
-      rowOccupancy.set(row, occupied);
-    }
-  };
-
-  const findFreePosition = (width: number, height: number): DashboardWidgetPosition => {
-    let y = 0;
-    while (true) {
-      for (let x = 0; x <= columns - width; x++) {
-        if (isPositionFree(x, y, width, height)) {
-          return { x, y };
-        }
-      }
-      y++;
-      // Safety limit
-      if (y > 100) break;
-    }
-    return { x: 0, y };
-  };
-
-  for (const widget of widgets) {
-    const position = findFreePosition(widget.size.width, widget.size.height);
-    layout.set(widget.id, position);
-    occupyPosition(position.x, position.y, widget.size.width, widget.size.height);
-  }
-
-  return layout;
-}
-
-/**
- * Merges saved layout with widget defaults
- * Handles cases where widgets have been added/removed
- * Auto-arranges widgets that don't have positions
- */
-export function mergeLayoutWithWidgets(
-  widgets: IDashboardWidget[],
-  savedLayout: Map<string, DashboardWidgetPosition> | null,
-): Map<string, DashboardWidgetPosition> {
-  // If we have a saved layout with positions, use it
-  if (savedLayout && savedLayout.size > 0) {
-    const layout = new Map<string, DashboardWidgetPosition>();
-
-    for (const widget of widgets) {
-      const savedPos = savedLayout.get(widget.id);
-      const builtInPos = widget.position;
-      const position = savedPos ?? builtInPos ?? { x: 0, y: 0 };
-      layout.set(widget.id, position);
-    }
-
-    return layout;
-  }
-
-  // Check if all widgets have built-in positions
-  const allHavePositions = widgets.every((w) => w.position !== undefined);
-
-  if (allHavePositions) {
-    const layout = new Map<string, DashboardWidgetPosition>();
-    for (const widget of widgets) {
-      layout.set(widget.id, widget.position!);
-    }
-    return layout;
-  }
-
-  // Auto-arrange widgets
-  return autoArrangeWidgets(widgets);
-}

package/shared/components/draggable-dashboard/draggable-dashboard.stories.ts

@@ -1,175 +0,0 @@
-import { defineComponent, markRaw, onUnmounted } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import DraggableDashboard from "@shared/components/draggable-dashboard/DraggableDashboard.vue";
-import { provideDashboardService } from "@core/composables/useDashboard";
-import { LAYOUT_STORAGE_KEY } from "@shared/components/draggable-dashboard";
-
-const MetricWidget = defineComponent({
-  name: "MetricWidget",
-  props: {
-    title: { type: String, required: true },
-    value: { type: [String, Number], required: true },
-    subtitle: { type: String, default: "" },
-  },
-  template: `
-    <div class="tw-h-full tw-w-full tw-rounded-md tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4 tw-flex tw-flex-col tw-justify-between">
-      <p class="tw-m-0 tw-text-sm tw-text-neutrals-500">{{ title }}</p>
-      <p class="tw-m-0 tw-text-4xl tw-font-semibold tw-text-neutrals-950">{{ value }}</p>
-      <p class="tw-m-0 tw-text-xs tw-text-success-500">{{ subtitle }}</p>
-    </div>
-  `,
-});
-
-const ListWidget = defineComponent({
-  name: "ListWidget",
-  props: {
-    title: { type: String, required: true },
-    items: { type: Array as () => string[], default: () => [] },
-  },
-  template: `
-    <div class="tw-h-full tw-w-full tw-rounded-md tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4 tw-flex tw-flex-col">
-      <p class="tw-m-0 tw-mb-3 tw-text-sm tw-font-medium tw-text-neutrals-700">{{ title }}</p>
-      <ul class="tw-m-0 tw-list-none tw-p-0 tw-space-y-2 tw-overflow-auto">
-        <li
-          v-for="item in items"
-          :key="item"
-          class="tw-rounded tw-bg-neutrals-100 tw-px-2 tw-py-1 tw-text-xs tw-text-neutrals-700"
-        >
-          {{ item }}
-        </li>
-      </ul>
-    </div>
-  `,
-});
-
-function registerStoryWidgets() {
-  const dashboard = provideDashboardService();
-  const existingIds = new Set(dashboard.getWidgets().map((widget) => widget.id));
-
-  const widgets = [
-    {
-      id: "story-orders",
-      name: "Orders",
-      component: markRaw(MetricWidget),
-      size: { width: 4, height: 3 },
-      position: { x: 0, y: 0 },
-      props: {
-        title: "Orders today",
-        value: "148",
-        subtitle: "+12.4% vs yesterday",
-      },
-    },
-    {
-      id: "story-revenue",
-      name: "Revenue",
-      component: markRaw(MetricWidget),
-      size: { width: 4, height: 3 },
-      position: { x: 4, y: 0 },
-      props: {
-        title: "Revenue",
-        value: "$12,480",
-        subtitle: "+8.1% this week",
-      },
-    },
-    {
-      id: "story-alerts",
-      name: "Alerts",
-      component: markRaw(ListWidget),
-      size: { width: 4, height: 3 },
-      position: { x: 8, y: 0 },
-      props: {
-        title: "Needs attention",
-        items: [
-          "4 offers waiting approval",
-          "2 shipments delayed",
-          "1 product requires changes",
-        ],
-      },
-    },
-    {
-      id: "story-top-products",
-      name: "Top Products",
-      component: markRaw(ListWidget),
-      size: { width: 6, height: 4 },
-      position: { x: 0, y: 3 },
-      props: {
-        title: "Top products this week",
-        items: [
-          "Cotton Hoodie",
-          "Winter Sneakers",
-          "Sports Bottle",
-          "Travel Backpack",
-          "Sunglasses",
-        ],
-      },
-    },
-    {
-      id: "story-funnel",
-      name: "Funnel",
-      component: markRaw(MetricWidget),
-      size: { width: 6, height: 4 },
-      position: { x: 6, y: 3 },
-      props: {
-        title: "Conversion",
-        value: "4.8%",
-        subtitle: "Checkout completion rate",
-      },
-    },
-  ];
-
-  widgets.forEach((widget) => {
-    if (!existingIds.has(widget.id)) {
-      dashboard.registerWidget(widget);
-    }
-  });
-}
-
-const meta = {
-  title: "Shared/DraggableDashboard",
-  component: DraggableDashboard,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        localStorage.removeItem(LAYOUT_STORAGE_KEY);
-        registerStoryWidgets();
-        onUnmounted(() => localStorage.removeItem(LAYOUT_STORAGE_KEY));
-      },
-      template: `
-        <div class="tw-h-[720px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-neutrals-100 tw-overflow-hidden">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  args: {
-    showDragHandles: false,
-    resizable: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Shared dashboard container used by shell and vendor portal. Story reproduces a realistic widget composition and demonstrates drag/reorder behavior with persisted layout.",
-      },
-    },
-  },
-} satisfies Meta<typeof DraggableDashboard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultLayout: Story = {};
-
-export const WithDragHandles: Story = {
-  args: {
-    showDragHandles: true,
-  },
-};
-
-export const ResizableWidgets: Story = {
-  args: {
-    showDragHandles: true,
-    resizable: true,
-  },
-};

package/shared/components/draggable-dashboard/index.ts

@@ -1,34 +0,0 @@
-// Main component
-export { default as DraggableDashboard } from "@shared/components/draggable-dashboard/DraggableDashboard.vue";
-
-// Types
-export type {
-  IDashboardWidget,
-  DashboardWidgetPosition,
-  DashboardWidgetSize,
-  DashboardDragEvent,
-  DashboardGridConfig,
-} from "@shared/components/draggable-dashboard/types";
-
-// Gridstack composables (for advanced usage)
-export { useGridstack } from "@shared/components/draggable-dashboard/composables/useGridstack";
-export type { UseGridstackOptions, UseGridstackReturn } from "@shared/components/draggable-dashboard/composables/useGridstack";
-
-// Import and re-export to avoid Storybook docgen issues with direct re-exports
-import {
-  toGridstackWidget as _toGridstackWidget,
-  fromGridstackNode as _fromGridstackNode,
-  loadLayoutFromStorage as _loadLayoutFromStorage,
-  saveLayoutToStorage as _saveLayoutToStorage,
-  mergeLayoutWithWidgets as _mergeLayoutWithWidgets,
-  clearLayoutStorage as _clearLayoutStorage,
-  LAYOUT_STORAGE_KEY as _LAYOUT_STORAGE_KEY,
-} from "@shared/components/draggable-dashboard/composables/useGridstackAdapter";
-
-export const toGridstackWidget = _toGridstackWidget;
-export const fromGridstackNode = _fromGridstackNode;
-export const loadLayoutFromStorage = _loadLayoutFromStorage;
-export const saveLayoutToStorage = _saveLayoutToStorage;
-export const mergeLayoutWithWidgets = _mergeLayoutWithWidgets;
-export const clearLayoutStorage = _clearLayoutStorage;
-export const LAYOUT_STORAGE_KEY = _LAYOUT_STORAGE_KEY;

package/shared/components/draggable-dashboard/types.ts

@@ -1,96 +0,0 @@
-import type { Component } from "vue";
-
-/**
- * Position type for a widget on the dashboard grid
- */
-export interface DashboardWidgetPosition {
-  /**
-   * X coordinate (left to right)
-   * @minimum 0
-   */
-  x: number;
-
-  /**
-   * Y coordinate (top to bottom)
-   * @minimum 0
-   */
-  y: number;
-}
-
-/**
- * Widget size type
- */
-export interface DashboardWidgetSize {
-  /**
-   * Width in grid cells
-   * @minimum 1
-   * @maximum 12
-   */
-  width: number;
-
-  /**
-   * Height in grid cells
-   * @minimum 1
-   */
-  height: number;
-}
-
-/**
- * Dashboard widget type
- */
-export interface IDashboardWidget {
-  /**
-   * Unique widget identifier
-   */
-  id: string;
-
-  /**
-   * Widget title
-   */
-  name?: string;
-
-  /**
-   * Rendering component
-   */
-  component: Component;
-
-  /**
-   * Component properties
-   */
-  props?: Record<string, unknown>;
-
-  /**
-   * Widget size
-   */
-  size: DashboardWidgetSize;
-
-  /**
-   * Built-in widget position (optional)
-   */
-  position?: DashboardWidgetPosition;
-}
-
-/**
- * Drag event type
- */
-export interface DashboardDragEvent {
-  widget: IDashboardWidget;
-  position: DashboardWidgetPosition;
-}
-
-/**
- * Grid configuration
- */
-export interface DashboardGridConfig {
-  /**
-   * Number of columns in the grid
-   * @default 12
-   */
-  columns: number;
-
-  /**
-   * Cell height in pixels
-   * @default 80
-   */
-  cellHeight: number;
-}

package/shared/components/error-interceptor/index.ts

@@ -1,18 +0,0 @@
-import { VNode } from "vue";
-import _Interceptor from "@shared/components/error-interceptor/interceptor";
-import { DisplayableError } from "@core/utilities/error";
-
-export const ErrorInterceptor = _Interceptor as typeof _Interceptor & {
-  new (): {
-    $slots: {
-      default: (args: { error: DisplayableError | null; reset: () => void }) => VNode[];
-    };
-  };
-};
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    ErrorInterceptor: typeof ErrorInterceptor;
-  }
-}

package/shared/components/error-interceptor/interceptor.ts

@@ -1,66 +0,0 @@
-import { useErrorHandler } from "@core/composables/useErrorHandler";
-import { defineComponent, inject, watch, type VNode } from "vue";
-import { BladeDescriptorKey, BladeStackKey } from "@shared/components/blade-navigation/types";
-import { cancelPendingErrorNotification } from "@core/utilities/pendingErrorNotifications";
-
-export interface Props {
-  capture?: boolean;
-}
-
-export interface Emits {
-  (event: "error", value: Error | string): void;
-  (event: "reset"): void;
-}
-
-export type Slots = {
-  slots: {
-    default: (args: { error: Error | string | null; reset: () => void }) => VNode[];
-  };
-};
-
-export default defineComponent({
-  name: "ErrorInterceptor",
-  props: {
-    capture: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  emits: {
-    error(value: Error | string) {
-      return (value && value instanceof Error) || typeof value === "string";
-    },
-    reset(): boolean {
-      return true;
-    },
-  },
-  setup(props, { slots }) {
-    // Inject blade context BEFORE registering onErrorCaptured so we can
-    // stop error propagation when inside a blade (prevents duplicate toast
-    // from the global error handler).
-    const descriptor = inject(BladeDescriptorKey, undefined);
-    const bladeStack = inject(BladeStackKey, undefined);
-    const hasBlade = !!(descriptor && bladeStack);
-
-    const { error, reset } = useErrorHandler(hasBlade || props.capture);
-
-    if (hasBlade) {
-      watch(error, (newError) => {
-        const bladeId = descriptor!.value.id;
-        if (newError) {
-          // Cancel any deferred useAsync toast — blade banner replaces it
-          cancelPendingErrorNotification(newError);
-          bladeStack!.setBladeError(bladeId, newError);
-        } else {
-          bladeStack!.clearBladeError(bladeId);
-        }
-      });
-    }
-
-    return () =>
-      slots.default?.({
-        error: error.value,
-        reset,
-      });
-  },
-});