fix(dashboard): Fix some dependency issues

packages/dashboard/README.md

@@ -4,7 +4,10 @@ This is an admin dashboard for managing Vendure applications. It is designed to
 
 Current status: early work in progress
 
+## Development
+
+Run `npx vite` to start Vite in dev mode.
+
 ## Testing
 
-There are some unit tests in this repo (`.spec.ts` files). In order to run them, you need to go to the `../dev-server` dir
-and run `npx vitest`. This is a temporary work-around for some hard-to-debug path issue when trying to run from this dir.
+Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode

packages/dashboard/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
-  "private": true,
-  "version": "0.0.0",
+  "private": false,
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,17 +20,19 @@
     "./plugin": "./dist-plugin/index.js"
   },
   "files": [
-    "dist",
+    "dist-plugin",
     "src",
-    "lingui.config.js"
+    "lingui.config.js",
+    "index.html"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.5.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@hookform/resolvers": "^4.1.3",
+    "@lingui/babel-plugin-lingui-macro": "^5.2.0",
     "@lingui/core": "^5.2.0",
     "@lingui/react": "^5.2.0",
+    "@lingui/vite-plugin": "^5.2.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.3",
@@ -53,11 +55,12 @@
     "@tanstack/react-query-devtools": "^5.68.0",
     "@tanstack/react-router": "^1.105.0",
     "@tanstack/react-table": "^8.21.2",
+    "@tanstack/router-plugin": "^1.105.0",
     "@tiptap/pm": "^2.11.5",
     "@tiptap/react": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@types/node": "^22.13.4",
     "@uidotdev/usehooks": "^2.4.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -82,21 +85,17 @@
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.2.4",
     "unplugin-swc": "^1.5.1",
-    "use-debounce": "^10.0.4",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
-    "@lingui/babel-plugin-lingui-macro": "^5.2.0",
     "@lingui/cli": "^5.2.0",
-    "@lingui/vite-plugin": "^5.2.0",
     "@tanstack/eslint-plugin-query": "^5.66.1",
     "@tanstack/router-devtools": "^1.105.0",
-    "@tanstack/router-plugin": "^1.105.0",
+    "@types/node": "^22.13.4",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.19.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",

packages/dashboard/src/components/shared/asset-gallery.tsx

@@ -22,7 +22,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Loader2, Search, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { useDebounce } from 'use-debounce';
+import { useDebounce } from '@uidotdev/usehooks';
 
 const getAssetListDocument = graphql(`
     query GetAssetList($options: AssetListOptions) {

packages/dashboard/src/components/shared/facet-value-selector.tsx

@@ -3,7 +3,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
 import { api } from '@/graphql/api.js';
 import { graphql } from '@/graphql/graphql.js';
-import { useDebounce } from '@/hooks/use-debounce.js';
+import { useDebounce } from '@uidotdev/usehooks';
 import { Trans } from '@lingui/react/macro';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';

packages/dashboard/src/components/shared/paginated-list-data-table.tsx

@@ -8,7 +8,7 @@ import {
 import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
 import { api } from '@/graphql/api.js';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useDebounce } from 'use-debounce';
+import { useDebounce } from '@uidotdev/usehooks';
 
 import {
     DropdownMenu,

packages/dashboard/src/hooks/use-debounce.ts

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-    const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
-
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [value, delay]);
-
-    return debouncedValue;
-}

packages/dashboard/src/routes/_authenticated/_products/products_.$id.tsx

@@ -1,3 +1,4 @@
+import { RichTextInput } from '@/components/data-input/richt-text-input.js';
 import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/components/shared/entity-assets.js';
 import { ErrorPage } from '@/components/shared/error-page.js';
@@ -8,7 +9,6 @@ import { Button } from '@/components/ui/button.js';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
 import { Input } from '@/components/ui/input.js';
 import { Switch } from '@/components/ui/switch.js';
-import { Textarea } from '@/components/ui/textarea.js';
 import { NEW_ENTITY_PATH } from '@/constants.js';
 import {
     CustomFieldsPageBlock,
@@ -29,7 +29,6 @@ import { toast } from 'sonner';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
-import { RichTextInput } from '@/components/data-input/richt-text-input.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
@@ -65,7 +64,7 @@ function ProductDetailPage() {
                 translations: entity.translations.map(translation => ({
                     id: translation.id,
                     languageCode: translation.languageCode,
-                    name: translation.name,
+                    name: translation.name, 
                     slug: translation.slug,
                     description: translation.description,
                     customFields: translation.customFields,

packages/dashboard/vitest.config.mts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import { vendureDashboardPlugin } from './dist/plugin/index.js';
-import { pathToFileURL } from 'url';
-
-export default defineConfig({
-    test: {
-        globals: true,
-        environment: 'jsdom',
-    },
-    plugins: [
-        vendureDashboardPlugin({
-            vendureConfigPath: pathToFileURL('../dev-server/dev-config.ts'),
-        }) as any,
-    ],
-});