@vendure/dashboard 3.2.0 → 3.2.2

package/LICENSE.md

@@ -0,0 +1,42 @@
+# License
+Copyright (C) Vendure GmbH
+
+This software is available under two different licenses:
+* GNU General Public License version 3 (GPLv3) as Vendure Community Edition
+* Vendure Commercial License (VCL)
+
+The default Vendure license, without a valid Vendure Commercial License agreement, is the Open-Source GPLv3 license.
+
+## GNU General Public License version 3 (GPLv3)
+
+If you decide to choose the GPLv3 license, you must comply with the following terms:
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Additional permission under GNU GPL version 3 section 7:
+
+An additional exception under section 7 of the GPL is included in the plugin-exception.txt file,
+which allows you to distribute Vendure plugins (i.e. extensions) under a different license.
+
+## Vendure Commercial License (VCL)
+
+Alternatively, commercial and supported versions of the program - also known as
+Commercial Distributions - must be used in accordance with the terms and conditions
+contained in a separate written agreement between you and Vendure GmbH.
+For more information about the Vendure Commercial License (VCL) please contact contact@vendure.io.
+
+Please see also:
+
+- [Licensing FAQ - license-faq.md](license/license-faq.md)
+- [GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 - gpl-3.0.txt](license/gpl-3.0.txt)

package/README.md

@@ -1,13 +1,13 @@
-# Vendure Dashboard
-
-This is an admin dashboard for managing Vendure applications. It is designed to supersede the existing Admin UI.
-
-Current status: early work in progress
-
-## Development
-
-Run `npx vite` to start Vite in dev mode.
-
-## Testing
-
+# Vendure Dashboard
+
+This is an admin dashboard for managing Vendure applications. It is designed to supersede the existing Admin UI.
+
+Current status: early work in progress
+
+## Development
+
+Run `npx vite` to start Vite in dev mode.
+
+## Testing
+
 Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode

package/dist/plugin/vite-plugin-admin-api-schema.js

@@ -25,8 +25,8 @@ export function adminApiSchemaPlugin() {
         },
         load(id) {
             if (id === resolvedVirtualModuleId) {
-                return `
-                    export const schemaInfo = ${JSON.stringify(schemaInfo)};
+                return `
+                    export const schemaInfo = ${JSON.stringify(schemaInfo)};
                 `;
             }
         },

package/dist/plugin/vite-plugin-dashboard-metadata.js

@@ -34,10 +34,10 @@ export function dashboardMetadataPlugin(options) {
                     return { importPath: `./${jsPath}` };
                 });
                 this.info(`Found ${extensionData.length} Dashboard extensions`);
-                return `
-                    export async function runDashboardExtensions() {
-                        ${extensionData.map(extension => `await import('${extension.importPath}');`).join('\n')}
-                    }
+                return `
+                    export async function runDashboardExtensions() {
+                        ${extensionData.map(extension => `await import('${extension.importPath}');`).join('\n')}
+                    }
                 `;
             }
         },

package/dist/plugin/vite-plugin-theme.d.ts

@@ -0,0 +1,55 @@
+import { Plugin } from 'vite';
+type ThemeColors = {
+    background?: string;
+    foreground?: string;
+    card?: string;
+    'card-foreground'?: string;
+    popover?: string;
+    'popover-foreground'?: string;
+    primary?: string;
+    'primary-foreground'?: string;
+    secondary?: string;
+    'secondary-foreground'?: string;
+    muted?: string;
+    'muted-foreground'?: string;
+    accent?: string;
+    'accent-foreground'?: string;
+    destructive?: string;
+    'destructive-foreground'?: string;
+    success?: string;
+    'success-foreground'?: string;
+    'dev-mode'?: string;
+    'dev-mode-foreground'?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+    'chart-1'?: string;
+    'chart-2'?: string;
+    'chart-3'?: string;
+    'chart-4'?: string;
+    'chart-5'?: string;
+    radius?: string;
+    sidebar?: string;
+    'sidebar-foreground'?: string;
+    'sidebar-primary'?: string;
+    'sidebar-primary-foreground'?: string;
+    'sidebar-accent'?: string;
+    'sidebar-accent-foreground'?: string;
+    'sidebar-border'?: string;
+    'sidebar-ring'?: string;
+    brand?: string;
+    'brand-lighter'?: string;
+    'brand-darker'?: string;
+    'font-sans'?: string;
+    'font-mono'?: string;
+    [key: string]: string | undefined;
+};
+export interface ThemeVariables {
+    light?: ThemeColors;
+    dark?: ThemeColors;
+}
+export type ThemeVariablesPluginOptions = {
+    theme?: ThemeVariables;
+};
+export declare function themeVariablesPlugin(options: ThemeVariablesPluginOptions): Plugin;
+export {};

package/dist/plugin/vite-plugin-theme.js

@@ -0,0 +1,130 @@
+const defaultVariables = {
+    light: {
+        background: 'hsl(0 0% 100%)',
+        foreground: 'hsl(0 0% 3.9%)',
+        card: 'hsl(0 0% 100%)',
+        'card-foreground': 'hsl(0 0% 3.9%)',
+        popover: 'hsl(0 0% 100%)',
+        'popover-foreground': 'hsl(0 0% 3.9%)',
+        primary: 'hsl(0 0% 9%)',
+        'primary-foreground': 'hsl(0 0% 98%)',
+        secondary: 'hsl(0 0% 96.1%)',
+        'secondary-foreground': 'hsl(0 0% 9%)',
+        muted: 'hsl(0 0% 96.1%)',
+        'muted-foreground': 'hsl(0 0% 45.1%)',
+        accent: 'hsl(0 0% 96.1%)',
+        'accent-foreground': 'hsl(0 0% 9%)',
+        destructive: 'hsl(0 84.2% 60.2%)',
+        'destructive-foreground': 'hsl(0 0% 98%)',
+        success: 'hsl(100, 81%, 35%)',
+        'success-foreground': 'hsl(0 0% 98%)',
+        'dev-mode': 'hsl(204, 76%, 62%)',
+        'dev-mode-foreground': 'hsl(0 0% 98%)',
+        border: 'hsl(0 0% 89.8%)',
+        input: 'hsl(0 0% 89.8%)',
+        ring: 'hsl(0 0% 3.9%)',
+        'chart-1': 'hsl(12 76% 61%)',
+        'chart-2': 'hsl(173 58% 39%)',
+        'chart-3': 'hsl(197 37% 24%)',
+        'chart-4': 'hsl(43 74% 66%)',
+        'chart-5': 'hsl(27 87% 67%)',
+        radius: '0.6rem',
+        sidebar: 'hsl(0 0% 98%)',
+        'sidebar-foreground': 'hsl(240 5.3% 26.1%)',
+        'sidebar-primary': 'hsl(240 5.9% 10%)',
+        'sidebar-primary-foreground': 'hsl(0 0% 98%)',
+        'sidebar-accent': 'hsl(0, 0%, 92%)',
+        'sidebar-accent-foreground': 'hsl(240 5.9% 10%)',
+        'sidebar-border': 'hsl(220 13% 91%)',
+        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        brand: '#17c1ff',
+        'brand-lighter': '#e6f9ff',
+        'brand-darker': '#0099ff',
+        'font-sans': "'Geist', sans-serif",
+        'font-mono': "'Geist Mono', monospace",
+    },
+    dark: {
+        background: 'hsl(0 0% 3.9%)',
+        foreground: 'hsl(0 0% 98%)',
+        card: 'hsl(0 0% 3.9%)',
+        'card-foreground': 'hsl(0 0% 98%)',
+        popover: 'hsl(0 0% 3.9%)',
+        'popover-foreground': 'hsl(0 0% 98%)',
+        primary: 'hsl(0 0% 98%)',
+        'primary-foreground': 'hsl(0 0% 9%)',
+        secondary: 'hsl(0 0% 14.9%)',
+        'secondary-foreground': 'hsl(0 0% 98%)',
+        muted: 'hsl(0 0% 14.9%)',
+        'muted-foreground': 'hsl(0 0% 63.9%)',
+        accent: 'hsl(0 0% 14.9%)',
+        'accent-foreground': 'hsl(0 0% 98%)',
+        destructive: 'hsl(0 62.8% 30.6%)',
+        'destructive-foreground': 'hsl(0 0% 98%)',
+        success: 'hsl(100, 100%, 35%)',
+        'success-foreground': 'hsl(0 0% 98%)',
+        'dev-mode': 'hsl(204, 86%, 53%)',
+        'dev-mode-foreground': 'hsl(0 0% 98%)',
+        border: 'hsl(0 0% 14.9%)',
+        input: 'hsl(0 0% 14.9%)',
+        ring: 'hsl(0 0% 83.1%)',
+        'chart-1': 'hsl(220 70% 50%)',
+        'chart-2': 'hsl(160 60% 45%)',
+        'chart-3': 'hsl(30 80% 55%)',
+        'chart-4': 'hsl(280 65% 60%)',
+        'chart-5': 'hsl(340 75% 55%)',
+        sidebar: 'hsl(240 5.9% 10%)',
+        'sidebar-foreground': 'hsl(240 4.8% 95.9%)',
+        'sidebar-primary': 'hsl(224.3 76.3% 48%)',
+        'sidebar-primary-foreground': 'hsl(0 0% 100%)',
+        'sidebar-accent': 'hsl(240 3.7% 15.9%)',
+        'sidebar-accent-foreground': 'hsl(240 4.8% 95.9%)',
+        'sidebar-border': 'hsl(240 3.7% 15.9%)',
+        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        brand: '#17c1ff',
+        'brand-lighter': '#e6f9ff',
+        'brand-darker': '#0099ff',
+        'font-sans': "'Geist', sans-serif",
+        'font-mono': "'Geist Mono', monospace",
+    },
+};
+export function themeVariablesPlugin(options) {
+    const virtualModuleId = 'virtual:admin-theme';
+    const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+    return {
+        name: 'vendure:admin-theme',
+        enforce: 'pre', // This ensures our plugin runs before other CSS processors
+        transform(code, id) {
+            var _a, _b;
+            // Only transform CSS files
+            if (!id.endsWith('styles.css')) {
+                return null;
+            }
+            // Replace the @import 'virtual:admin-theme'; with our theme variables
+            if (code.includes('@import "virtual:admin-theme";') ||
+                code.includes("@import 'virtual:admin-theme';")) {
+                const lightTheme = ((_a = options.theme) === null || _a === void 0 ? void 0 : _a.light) || {};
+                const darkTheme = ((_b = options.theme) === null || _b === void 0 ? void 0 : _b.dark) || {};
+                // Merge default themes with custom themes
+                const mergedLightTheme = Object.assign(Object.assign({}, defaultVariables.light), lightTheme);
+                const mergedDarkTheme = Object.assign(Object.assign({}, defaultVariables.dark), darkTheme);
+                const themeCSS = `
+                    :root {
+                        ${Object.entries(mergedLightTheme)
+                    .filter(([key, value]) => value !== undefined)
+                    .map(([key, value]) => `--${key}: ${value};`)
+                    .join('\n')}
+                    }
+
+                    .dark {
+                        ${Object.entries(mergedDarkTheme)
+                    .filter(([key, value]) => value !== undefined)
+                    .map(([key, value]) => `--${key}: ${value};`)
+                    .join('\n')}
+                    }
+                `;
+                return code.replace(/@import ['"]virtual:admin-theme['"];?/, themeCSS);
+            }
+            return null;
+        },
+    };
+}

package/dist/plugin/vite-plugin-ui-config.js

@@ -27,8 +27,8 @@ export function uiConfigPlugin({ adminUiConfig }) {
                     vendureConfig = await configLoaderApi.getVendureConfig();
                 }
                 const config = getAdminUiConfig(vendureConfig, adminUiConfig);
-                return `
-                    export const uiConfig = ${JSON.stringify(config)}
+                return `
+                    export const uiConfig = ${JSON.stringify(config)}
                 `;
             }
         },

package/dist/plugin/vite-plugin-vendure-dashboard.d.ts

@@ -1,4 +1,5 @@
 import { PluginOption } from 'vite';
+import { ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
 import { UiConfigPluginOptions } from './vite-plugin-ui-config.js';
 /**
  * @description
@@ -23,7 +24,7 @@ export type VitePluginVendureDashboardOptions = {
     gqlTadaOutputPath?: string;
     tempCompilationDir?: string;
     disableTansStackRouterPlugin?: boolean;
-} & UiConfigPluginOptions;
+} & UiConfigPluginOptions & ThemeVariablesPluginOptions;
 /**
  * @description
  * This is a Vite plugin which configures a set of plugins required to build the Vendure Dashboard.

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -7,6 +7,7 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
+import { themeVariablesPlugin } from './vite-plugin-theme.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
 /**
  * @description
@@ -39,6 +40,7 @@ export function vendureDashboardPlugin(options) {
         //     plugins: ['@lingui/babel-plugin-lingui-macro'],
         // },
         }),
+        themeVariablesPlugin({ theme: options.theme }),
         tailwindcss(),
         configLoaderPlugin({ vendureConfigPath: normalizedVendureConfigPath, tempDir }),
         viteConfigPlugin({ packageRoot }),

package/index.html

@@ -1,15 +1,15 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="Vendure Admin Dashboard" />
-        <meta name="author" content="Vendure" />
-        <title>Vendure Admin Dashboard</title>
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="module" src="/src/app/main.jsx"></script>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Vendure Admin Dashboard" />
+        <meta name="author" content="Vendure" />
+        <title>Vendure Admin Dashboard</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/app/main.jsx"></script>
+    </body>
+</html>

package/lingui.config.js

@@ -1,12 +1,12 @@
-import { defineConfig } from '@lingui/cli';
-
-export default defineConfig({
-    sourceLocale: 'en',
-    locales: ['de', 'en'],
-    catalogs: [
-        {
-            path: '<rootDir>/src/i18n/locales/{locale}',
-            include: ['<rootDir>'],
-        },
-    ],
-});
+import { defineConfig } from '@lingui/cli';
+
+export default defineConfig({
+    sourceLocale: 'en',
+    locales: ['de', 'en'],
+    catalogs: [
+        {
+            path: '<rootDir>/src/i18n/locales/{locale}',
+            include: ['<rootDir>'],
+        },
+    ],
+});

package/package.json

@@ -1,13 +1,21 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.2.0",
+    "version": "3.2.2",
     "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vendure-ecommerce/vendure"
+    },
+    "homepage": "https://www.vendure.io",
+    "funding": "https://github.com/sponsors/michaelbromley",
+    "publishConfig": {
+        "access": "public"
+    },
     "scripts": {
         "dev": "vite",
-        "build:lib": "vite build --config vite.config.lib.mts",
-        "build:plugin": "tsc --project tsconfig.plugin.json",
-        "watch:plugin": "tsc --project tsconfig.plugin.json --watch",
+        "build": "tsc --project tsconfig.plugin.json",
+        "watch": "tsc --project tsconfig.plugin.json --watch",
         "test": "vitest run",
         "lint": "eslint .",
         "preview": "vite preview",
@@ -76,6 +84,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
+        "@vendure/common": "3.2.2",
+        "@vendure/core": "3.2.2",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -114,5 +124,5 @@
         "globals": "^15.14.0",
         "vite-plugin-dts": "^4.5.3"
     },
-    "gitHead": "58c173ac0c7854ff53809d69f34a496f3eff1910"
+    "gitHead": "8729e7f8f028be556543c8e971e750228e516919"
 }

package/src/app/app-providers.tsx

@@ -1,30 +1,30 @@
-import { AuthProvider } from '@/providers/auth.js';
-import { ChannelProvider } from '@/providers/channel-provider.js';
-import { I18nProvider } from '@/providers/i18n-provider.js';
-import { ServerConfigProvider } from '@/providers/server-config.js';
-import { ThemeProvider } from '@/providers/theme-provider.js';
-import { UserSettingsProvider } from '@/providers/user-settings.js';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import React from 'react';
-
-export const queryClient = new QueryClient();
-
-export function AppProviders({ children }: { children: React.ReactNode }) {
-    return (
-        <I18nProvider>
-            <QueryClientProvider client={queryClient}>
-                <ServerConfigProvider>
-                    <UserSettingsProvider>
-                        <ThemeProvider defaultTheme="system">
-                            <AuthProvider>
-                                <ChannelProvider>{children}</ChannelProvider>
-                            </AuthProvider>
-                        </ThemeProvider>
-                    </UserSettingsProvider>
-                </ServerConfigProvider>
-                <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
-            </QueryClientProvider>
-        </I18nProvider>
-    );
-}
+import { AuthProvider } from '@/providers/auth.js';
+import { ChannelProvider } from '@/providers/channel-provider.js';
+import { I18nProvider } from '@/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/providers/server-config.js';
+import { ThemeProvider } from '@/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/providers/user-settings.js';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import React from 'react';
+
+export const queryClient = new QueryClient();
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <I18nProvider>
+            <QueryClientProvider client={queryClient}>
+                <ServerConfigProvider>
+                    <UserSettingsProvider>
+                        <ThemeProvider defaultTheme="system">
+                            <AuthProvider>
+                                <ChannelProvider>{children}</ChannelProvider>
+                            </AuthProvider>
+                        </ThemeProvider>
+                    </UserSettingsProvider>
+                </ServerConfigProvider>
+                <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+            </QueryClientProvider>
+        </I18nProvider>
+    );
+}