@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/index.tsx

@@ -0,0 +1,194 @@
+import { Button } from '@/components/ui/button.js';
+import { DashboardWidgetInstance } from '@/framework/dashboard-widget/types.js';
+import {
+    getDashboardWidget,
+    getDashboardWidgetRegistry,
+} from '@/framework/dashboard-widget/widget-extensions.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+export const Route = createFileRoute('/_authenticated/')({
+    component: DashboardPage,
+});
+
+const findNextPosition = (
+    existingWidgets: DashboardWidgetInstance[],
+    newWidgetSize: { w: number; h: number },
+) => {
+    // Create a set of all occupied cells
+    const occupied = new Set();
+    let maxExistingRow = 0;
+
+    existingWidgets.forEach(widget => {
+        const { x, y, w, h } = widget.layout;
+        // Track the maximum row used by existing widgets
+        maxExistingRow = Math.max(maxExistingRow, y + h);
+
+        for (let i = x; i < x + w; i++) {
+            for (let j = y; j < y + h; j++) {
+                occupied.add(`${i},${j}`);
+            }
+        }
+    });
+
+    // Search up to 3 rows past the last occupied row
+    const maxSearchRows = maxExistingRow + 3;
+
+    // Find first position where the widget fits
+    for (let y = 0; y < maxSearchRows; y++) {
+        for (let x = 0; x < 12 - (newWidgetSize.w || 1); x++) {
+            let fits = true;
+            // Check if all cells needed for this widget are free
+            for (let i = x; i < x + (newWidgetSize.w || 1); i++) {
+                for (let j = y; j < y + (newWidgetSize.h || 1); j++) {
+                    if (occupied.has(`${i},${j}`)) {
+                        fits = false;
+                        break;
+                    }
+                }
+                if (!fits) break;
+            }
+            if (fits) {
+                return { x, y };
+            }
+        }
+    }
+    // If no space found, place it in the next row after all existing widgets
+    return { x: 0, y: maxExistingRow };
+};
+
+function DashboardPage() {
+    const [widgets, setWidgets] = useState<DashboardWidgetInstance[]>([]);
+    const [editMode, setEditMode] = useState(false);
+    const [layoutWidth, setLayoutWidth] = useState<number | undefined>(undefined);
+    const layoutRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!layoutRef.current) return;
+
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setLayoutWidth(entry.contentRect.width);
+            }
+        });
+
+        resizeObserver.observe(layoutRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    useEffect(() => {
+        const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
+            (acc: DashboardWidgetInstance[], [id, widget]) => {
+                const layout = {
+                    ...widget.defaultSize,
+                    x: widget.defaultSize.x ?? 0,
+                    y: widget.defaultSize.y ?? 0,
+                };
+
+                // If x or y is not set, find the next available position
+                if (widget.defaultSize.x === undefined || widget.defaultSize.y === undefined) {
+                    const pos = findNextPosition(acc, {
+                        w: widget.defaultSize.w || 1,
+                        h: widget.defaultSize.h || 1,
+                    });
+                    layout.x = pos.x;
+                    layout.y = pos.y;
+                }
+
+                return [
+                    ...acc,
+                    {
+                        id,
+                        widgetId: id,
+                        layout,
+                    },
+                ];
+            },
+            [],
+        );
+
+        setWidgets(initialWidgets);
+    }, []);
+
+    const handleLayoutChange = (layout: ReactGridLayout.Layout[]) => {
+        setWidgets(prev =>
+            prev.map((widget, i) => ({
+                ...widget,
+                layout: layout[i],
+            })),
+        );
+    };
+
+    const memoizedLayoutGrid = useMemo(() => {
+        return (
+            layoutWidth && (
+                <ResponsiveGridLayout
+                    className="overflow-hidden"
+                    key={layoutWidth}
+                    width={layoutWidth}
+                    layouts={{ lg: widgets.map(w => ({ ...w.layout, i: w.id })) }}
+                    onLayoutChange={handleLayoutChange}
+                    cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
+                    rowHeight={100}
+                    isDraggable={editMode}
+                    isResizable={editMode}
+                    autoSize={true}
+                    innerRef={layoutRef}
+                    transformScale={0.9}
+                >
+                    {widgets.map(widget => {
+                        const definition = getDashboardWidget(widget.widgetId);
+                        if (!definition) return null;
+                        const WidgetComponent = definition.component;
+
+                        return (
+                            <div key={widget.id}>
+                                <WidgetComponent id={widget.id} config={widget.config} />
+                            </div>
+                        );
+                    })}
+                </ResponsiveGridLayout>
+            )
+        );
+    }, [layoutWidth, editMode, widgets]);
+
+    return (
+        <Page pageId="dashboard">
+            <PageTitle>Dashboard</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <Button variant="outline" onClick={() => setEditMode(prev => !prev)}>
+                        Edit Mode
+                        {editMode ? (
+                            <span className="text-xs text-destructive">ON</span>
+                        ) : (
+                            <span className="text-xs text-muted-foreground">OFF</span>
+                        )}
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <FullWidthPageBlock blockId="widgets">
+                    <div ref={layoutRef} className="h-full w-full">
+                        {memoizedLayoutGrid}
+                    </div>
+                </FullWidthPageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated.tsx

@@ -0,0 +1,25 @@
+import { AppLayout } from '@/components/layout/app-layout.js';
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
+import * as React from 'react';
+
+export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
+    beforeLoad: ({ context, location }) => {
+        if (!context.auth.isAuthenticated) {
+            throw redirect({
+                to: '/login',
+                search: {
+                    redirect: location.href,
+                },
+            });
+        }
+    },
+    loader: () => ({
+        breadcrumb: 'Dashboard',
+    }),
+    component: AuthLayout,
+});
+
+function AuthLayout() {
+    return <AppLayout />;
+}

package/src/app/routes/login.tsx

@@ -0,0 +1,48 @@
+import { LoginForm } from '@/components/login/login-form.js';
+import { useAuth } from '@/hooks/use-auth.js';
+import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const fallback = '/' as const;
+
+export const Route = createFileRoute('/login')({
+    validateSearch: z.object({
+        redirect: z.string().optional().catch(''),
+    }),
+    beforeLoad: ({ context, search }) => {
+        if (context.auth.isAuthenticated) {
+            throw redirect({ to: search.redirect || fallback });
+        }
+    },
+    component: LoginPage,
+});
+
+function LoginPage() {
+    const auth = useAuth();
+    const isLoading = useRouterState({ select: s => s.isLoading });
+    const navigate = Route.useNavigate();
+    const search = Route.useSearch();
+
+    const onFormSubmit = (username: string, password: string) => {
+        auth.login(username, password, () => {
+            navigate({ to: search.redirect || fallback });
+        });
+    };
+
+    if (auth.isAuthenticated) {
+        return <Navigate to={search.redirect || fallback} />;
+    }
+
+    const isVerifying = isLoading || auth.status === 'verifying';
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+            <div className="w-full max-w-sm md:max-w-4xl">
+                <LoginForm
+                    onFormSubmit={onFormSubmit}
+                    isVerifying={isVerifying}
+                    loginError={auth.authenticationError}
+                />
+            </div>
+        </div>
+    );
+}

package/src/app/styles.css

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+* Important: This is not an actual import. We are pre-processing this CSS file
+* to inject the theme variables into the CSS. This import will be replaced
+* with the actual theme variables by the Vite plugin.
+*/
+@import 'virtual:admin-theme';
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-dev-mode: var(--dev-mode);
+    --color-dev-mode-foreground: var(--dev-mode-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-brand: var(--brand);
+    --color-brand-lighter: var(--brand-lighter);
+    --color-brand-darker: var(--brand-darker);
+    --font-sans: var(--font-sans);
+    --font-mono: var(--font-mono);
+    --color-vendure-brand: #17c1ff;
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@utility col-main {
+    grid-column: span 3 / span 3;
+}
+@utility col-side {
+    grid-column: span 2 / span 2;
+}
+
+/* Overrides for the react-grid-layout library */
+.react-grid-item {
+    transition: none !important;
+}

package/src/app/tailwindcss-animate.css

@@ -0,0 +1,275 @@
+/**
+ * TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
+ *
+ * WARNING: The asterisks are not supported by some formatters and linters. You
+ * might want to exclude this file from formatters and linters for now.
+ *
+ * @author Luca Bosin <https://github.com/Wombosvideo>
+ * @license MIT
+ */
+
+@theme inline {
+    --animation-delay-0: 0s;
+    --animation-delay-75: 75ms;
+    --animation-delay-100: 0.1s;
+    --animation-delay-150: 0.15s;
+    --animation-delay-200: 0.2s;
+    --animation-delay-300: 0.3s;
+    --animation-delay-500: 0.5s;
+    --animation-delay-700: 0.7s;
+    --animation-delay-1000: 1s;
+
+    --animation-repeat-0: 0;
+    --animation-repeat-1: 1;
+    --animation-repeat-infinite: infinite;
+
+    --animation-direction-normal: normal;
+    --animation-direction-reverse: reverse;
+    --animation-direction-alternate: alternate;
+    --animation-direction-alternate-reverse: alternate-reverse;
+
+    --animation-fill-mode-none: none;
+    --animation-fill-mode-forwards: forwards;
+    --animation-fill-mode-backwards: backwards;
+    --animation-fill-mode-both: both;
+
+    --animate-in: var(--tw-duration, 150ms) var(--tw-ease, ease) enter;
+    --animate-out: var(--tw-duration, 150ms) var(--tw-ease, ease) exit;
+
+    --percentage-0: 0;
+    --percentage-5: 0.05;
+    --percentage-10: 0.1;
+    --percentage-15: 0.15;
+    --percentage-20: 0.2;
+    --percentage-25: 0.25;
+    --percentage-30: 0.3;
+    --percentage-35: 0.35;
+    --percentage-40: 0.4;
+    --percentage-45: 0.45;
+    --percentage-50: 0.5;
+    --percentage-55: 0.55;
+    --percentage-60: 0.6;
+    --percentage-65: 0.65;
+    --percentage-70: 0.7;
+    --percentage-75: 0.75;
+    --percentage-80: 0.8;
+    --percentage-85: 0.85;
+    --percentage-90: 0.9;
+    --percentage-95: 0.95;
+    --percentage-100: 1;
+
+    --translate-1/2: 50%;
+    --translate-1/3: 33.333333%;
+    --translate-2/3: 66.666667%;
+    --translate-1/4: 25%;
+    --translate-2/4: 50%;
+    --translate-3/4: 75%;
+    --translate-full: 100%;
+    --translate-px: 1px;
+    --translate-0: 0px;
+    --translate-0.5: 0.125rem;
+    --translate-1: 0.25rem;
+    --translate-1.5: 0.375rem;
+    --translate-2: 0.5rem;
+    --translate-2.5: 0.625rem;
+    --translate-3: 0.75rem;
+    --translate-3.5: 0.875rem;
+    --translate-4: 1rem;
+    --translate-5: 1.25rem;
+    --translate-6: 1.5rem;
+    --translate-7: 1.75rem;
+    --translate-8: 2rem;
+    --translate-9: 2.25rem;
+    --translate-10: 2.5rem;
+    --translate-11: 2.75rem;
+    --translate-12: 3rem;
+    --translate-14: 3.5rem;
+    --translate-16: 4rem;
+    --translate-20: 5rem;
+    --translate-24: 6rem;
+    --translate-28: 7rem;
+    --translate-32: 8rem;
+    --translate-36: 9rem;
+    --translate-40: 10rem;
+    --translate-44: 11rem;
+    --translate-48: 12rem;
+    --translate-52: 13rem;
+    --translate-56: 14rem;
+    --translate-60: 15rem;
+    --translate-64: 16rem;
+    --translate-72: 18rem;
+    --translate-80: 20rem;
+    --translate-96: 24rem;
+
+    @keyframes enter {
+        from {
+            opacity: var(--tw-enter-opacity, 1);
+            transform: translate3d(
+                var(--tw-enter-translate-x, 0),
+                var(--tw-enter-translate-y, 0),
+                0
+            )
+            scale3d(
+                var(--tw-enter-scale, 1),
+                var(--tw-enter-scale, 1),
+                var(--tw-enter-scale, 1)
+            )
+            rotate(var(--tw-enter-rotate, 0));
+        }
+    }
+
+    @keyframes exit {
+        to {
+            opacity: var(--tw-exit-opacity, 1);
+            transform: translate3d(
+                var(--tw-exit-translate-x, 0),
+                var(--tw-exit-translate-y, 0),
+                0
+            )
+            scale3d(
+                var(--tw-exit-scale, 1),
+                var(--tw-exit-scale, 1),
+                var(--tw-exit-scale, 1)
+            )
+            rotate(var(--tw-exit-rotate, 0));
+        }
+    }
+}
+
+/*
+ * Tailwind's default `duration` utility sets the `--tw-duration` variable, so
+ * can set `animation-duration` directly in the animation definition in the
+ * `@theme` section above. Same goes for the `animation-timing-function`, set
+ * with `--tw-ease`.
+ */
+
+@utility delay-* {
+    animation-delay: calc(--value(number) * 1ms);
+    animation-delay: --value(--animation-delay-*, [duration], [*]);
+}
+
+@utility repeat-* {
+    animation-iteration-count: --value(--animation-repeat-*, integer);
+}
+
+@utility direction-* {
+    animation-direction: --value(--animation-direction-*);
+}
+
+@utility fill-mode-* {
+    animation-fill-mode: --value(--animation-fill-mode-*);
+}
+
+@utility running {
+    animation-play-state: running;
+}
+@utility paused {
+    animation-play-state: paused;
+}
+
+@utility fade-in {
+    --tw-enter-opacity: 0;
+}
+@utility fade-in-* {
+    --tw-enter-opacity: --value(--percentage-*, [*]);
+}
+
+@utility fade-out {
+    --tw-exit-opacity: 0;
+}
+@utility fade-out-* {
+    --tw-exit-opacity: --value(--percentage-*, [*]);
+}
+
+@utility zoom-in {
+    --tw-enter-scale: 0;
+}
+@utility zoom-in-* {
+    --tw-enter-scale: calc(--value([percentage]) / 100%);
+    --tw-enter-scale: calc(--value([ratio], [number]));
+    --tw-enter-scale: --value(--percentage-*);
+}
+
+@utility zoom-out {
+    --tw-exit-scale: 0;
+}
+@utility zoom-out-* {
+    --tw-exit-scale: calc(--value([percentage]) / 100%);
+    --tw-exit-scale: calc(--value([ratio], [number]));
+    --tw-exit-scale: --value(--percentage-*);
+}
+
+@utility spin-in {
+    --tw-enter-rotate: 30deg;
+}
+@utility spin-in-* {
+    --tw-enter-rotate: calc(--value(number) * 1deg);
+    --tw-enter-rotate: --value(--rotate-*, [angle]);
+}
+
+@utility spin-out {
+    --tw-exit-rotate: 30deg;
+}
+@utility spin-out-* {
+    --tw-exit-rotate: calc(--value(number) * 1deg);
+    --tw-exit-rotate: --value(--rotate-*, [angle]);
+}
+
+@utility slide-in-from-top {
+    --tw-enter-translate-y: -100%;
+}
+@utility slide-in-from-top-* {
+    --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
+    --tw-enter-translate-y: calc(--value(--translate-*, [percentage], ratio, [length]) * -1);
+}
+
+@utility slide-in-from-bottom {
+    --tw-enter-translate-y: 100%;
+}
+@utility slide-in-from-bottom-* {
+    --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
+    --tw-enter-translate-y: --value(--translate-*, [percentage], ratio, [length]);
+}
+@utility slide-in-from-left {
+    --tw-enter-translate-x: -100%;
+}
+@utility slide-in-from-left-* {
+    --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
+    --tw-enter-translate-x: calc(--value(--translate-*, [percentage], ratio, [length]) * -1);
+}
+@utility slide-in-from-right {
+    --tw-enter-translate-x: 100%;
+}
+@utility slide-in-from-right-* {
+    --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
+    --tw-enter-translate-x: --value(--translate-*, [percentage], ratio, [length]);
+}
+
+@utility slide-out-to-top {
+    --tw-exit-translate-y: -100%;
+}
+@utility slide-out-to-top-* {
+    --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
+    --tw-exit-translate-y: calc(--value(--translate-*, [percentage], ratio, [length]) * -1);
+}
+@utility slide-out-to-bottom {
+    --tw-exit-translate-y: 100%;
+}
+@utility slide-out-to-bottom-* {
+    --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
+    --tw-exit-translate-y: --value(--translate-*, [percentage], ratio, [length]);
+}
+@utility slide-out-to-left {
+    --tw-exit-translate-x: -100%;
+}
+@utility slide-out-to-left-* {
+    --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
+    --tw-exit-translate-x: calc(--value(--translate-*, [percentage], ratio, [length]) * -1);
+}
+@utility slide-out-to-right {
+    --tw-exit-translate-x: 100%;
+}
+@utility slide-out-to-right-* {
+    --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
+    --tw-exit-translate-x: --value(--translate-*, [percentage], ratio, [length]);
+}