@veiag/payload-enhanced-sidebar 0.1.1 → 0.2.0

package/dist/types.d.ts

@@ -1,14 +1,98 @@
 import type { icons, LucideIcon } from 'lucide-react';
-import type { CollectionSlug, GlobalSlug } from 'payload';
+import type { CollectionSlug, GlobalSlug, Where } from 'payload';
+import type { ReactNode } from 'react';
 export type IconName = keyof typeof icons;
 export type LocalizedString = {
     [locale: string]: string;
 } | string;
 export type InternalIcon = IconName | LucideIcon;
+/**
+ * Available badge color variants
+ */
+export type BadgeColor = 'default' | 'error' | 'primary' | 'success' | 'warning';
+/**
+ * Badge configuration Trr API-based fetching
+ */
+export interface BadgeConfigApi {
+    /**
+     * Badge color variant
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    /**
+     * API endpoint to fetch badge data from.
+     * Can be relative (to current origin) or absolute URL.
+     */
+    endpoint: string;
+    /**
+     * HTTP method for the request
+     * @default 'GET'
+     */
+    method?: 'GET' | 'POST';
+    /**
+     * Key in the response object to extract the count from
+     * @default 'count'
+     */
+    responseKey?: string;
+    type: 'api';
+}
+/**
+ * Badge configuration for provider-based values.
+ * Values are provided via BadgeProvider context.
+ */
+export interface BadgeConfigProvider {
+    /**
+     * Badge color variant
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    /**
+     * Slug to look up in the BadgeProvider values.
+     * If not specified, defaults to the item's id/slug.
+     */
+    slug?: string;
+    type: 'provider';
+}
+/**
+ * Badge configuration for automatic collection document count.
+ * Fetches from /api/{collectionSlug}?limit=0 and uses totalDocs.
+ */
+export interface BadgeConfigCollectionCount {
+    /**
+     * Collection slug to count documents from.
+     * If not specified, defaults to the item's slug.
+     */
+    collectionSlug?: CollectionSlug;
+    /**
+     * Badge color variant
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    type: 'collection-count';
+    /**
+     * Optional where query to filter documents.
+     * Will be serialized as query string.
+     * @example { status: { equals: 'draft' } }
+     */
+    where?: Where;
+}
+/**
+ * Badge configuration - union of all badge types
+ */
+export type BadgeConfig = BadgeConfigApi | BadgeConfigCollectionCount | BadgeConfigProvider;
+/**
+ * Badge values provided via BadgeProvider context
+ */
+export type BadgeValues = Record<string, number | ReactNode>;
 /**
  * Sidebar tab that shows content when selected
  */
 export interface SidebarTabContent {
+    /**
+     * Badge configuration for this tab.
+     * Shows a badge on the tab icon in the tabs bar.
+     */
+    badge?: BadgeConfig;
     /**
      * Collections to show in this tab.
      * If not specified, no collections are shown (unless items are specified).
@@ -36,6 +120,11 @@ export interface SidebarTabContent {
     type: 'tab';
 }
 interface SidebarTabLinkBase {
+    /**
+     * Badge configuration for this link.
+     * Shows a badge on the link icon in the tabs bar.
+     */
+    badge?: BadgeConfig;
     /** Icon name from lucide-react */
     icon: IconName;
     /** Unique identifier */
@@ -95,6 +184,20 @@ export type SidebarTabItem = ExternalHrefItem | InternalHrefItem;
  * Configuration for the enhanced sidebar
  */
 export interface EnhancedSidebarConfig {
+    /**
+     * Badge configurations for sidebar items (collections, globals, custom items).
+     * Key is the slug of the item.
+     *
+     * @example
+     * ```typescript
+     * badges: {
+     *   'posts': { type: 'collection-count', color: 'primary' },
+     *   'orders': { type: 'api', endpoint: '/api/orders/pending', responseKey: 'count' },
+     *   'notifications': { type: 'provider', color: 'error' },
+     * }
+     * ```
+     */
+    badges?: Record<string, BadgeConfig>;
     /**
      * Disable the plugin
      * @default false

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug } from 'payload'\n\nexport type IconName = keyof typeof icons\n\nexport type LocalizedString = { [locale: string]: string } | string\n\nexport type InternalIcon = IconName | LucideIcon\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport interface SidebarTabContent {\n  /**\n   * Collections to show in this tab.\n   * If not specified, no collections are shown (unless items are specified).\n   * Use collection slugs.\n   */\n  collections?: CollectionSlug[]\n  /**\n   * Custom items to add to this tab.\n   * Items with `group` will be merged into matching collection groups.\n   * Items without `group` will be shown at the bottom as a flat list.\n   */\n  customItems?: SidebarTabItem[]\n  /**\n   * Globals to show in this tab.\n   * If not specified, no globals are shown.\n   * Use global slugs.\n   */\n  globals?: GlobalSlug[]\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier for the tab */\n  id: string\n  /** Tooltip/label for the tab */\n  label: LocalizedString\n  type: 'tab'\n}\n\ninterface SidebarTabLinkBase {\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier */\n  id: string\n  /** Tooltip/label */\n  label: LocalizedString\n  type: 'link'\n}\ninterface SidebarTabLinkExternal extends SidebarTabLinkBase {\n  /** Link href (absolute URL) */\n  href: string\n  isExternal: true\n}\ninterface SidebarTabLinkInternal extends SidebarTabLinkBase {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  isExternal?: false\n}\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A tab or link in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n  /**\n   * Group to add this item to.\n   * If matches an existing collection group label, item will be merged into that group.\n   * If no match found, a new group will be created.\n   * If not specified, item will be shown at the bottom as ungrouped.\n   */\n  group?: LocalizedString\n  /** Display label */\n  label: LocalizedString\n  /** Unique slug for the item */\n  slug: string\n}\ninterface ExternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (absolute URL or relative to root) */\n  href: string\n  /** Whether the link is external, without admin route prefix. */\n  isExternal: true\n}\n\ninterface InternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  /** Whether the link is external, without admin route prefix. */\n  isExternal?: false\n}\n/**\n * Custom item inside a sidebar tab\n */\nexport type SidebarTabItem = ExternalHrefItem | InternalHrefItem\n\n/**\n * Configuration for the enhanced sidebar\n */\nexport interface EnhancedSidebarConfig {\n  /**\n   * Disable the plugin\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Custom icons for collections and globals in the default tab.\n   */\n  icons?: {\n    collections?: Partial<Record<CollectionSlug, IconName>>\n    globals?: Partial<Record<GlobalSlug, IconName>>\n  }\n\n  /**\n   * Show logout button at the bottom of the tabs bar.\n   * @default true\n   */\n  showLogout?: boolean\n\n  /**\n   * Tabs and links to show in the sidebar tabs bar.\n   * Order matters - items are rendered top to bottom.\n   *\n   * @default [{ type: 'tab', id: 'default', icon: 'LayoutGrid', label: 'Collections' }]\n   */\n  tabs?: SidebarTab[]\n}\n\n/**\n * Generic document type for collections, with dynamic keys.\n * We assume values are either string or number for simplicity, useAsTitle is making sure of that.\n */\nexport type GenericCollectionDocument = {\n  [key: string]: number | string\n  id: string\n}\n\ninterface BaseExtendedEntity {\n  label: Record<string, string> | string\n  slug: string\n  type: 'collection' | 'custom' | 'global'\n}\n\ninterface InternalExtendedEntity extends BaseExtendedEntity {\n  href?: '' | `/${string}`\n  isExternal?: false\n}\n\ninterface ExternalExtendedEntity extends BaseExtendedEntity {\n  href: string\n  isExternal: true\n}\n\nexport type ExtendedEntity = ExternalExtendedEntity | InternalExtendedEntity\n\nexport type ExtendedGroup = {\n  entities: ExtendedEntity[]\n  label: Record<string, string> | string\n}\n"],"names":[],"mappings":"AAmKA,WAGC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug, Where } from 'payload'\nimport type { ReactNode } from 'react'\n\nexport type IconName = keyof typeof icons\n\nexport type LocalizedString = { [locale: string]: string } | string\n\nexport type InternalIcon = IconName | LucideIcon\n\n// ============================================\n// Badge Types\n// ============================================\n\n/**\n * Available badge color variants\n */\nexport type BadgeColor = 'default' | 'error' | 'primary' | 'success' | 'warning'\n\n/**\n * Badge configuration Trr API-based fetching\n */\nexport interface BadgeConfigApi {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * API endpoint to fetch badge data from.\n   * Can be relative (to current origin) or absolute URL.\n   */\n  endpoint: string\n  /**\n   * HTTP method for the request\n   * @default 'GET'\n   */\n  method?: 'GET' | 'POST'\n  /**\n   * Key in the response object to extract the count from\n   * @default 'count'\n   */\n  responseKey?: string\n  type: 'api'\n}\n\n/**\n * Badge configuration for provider-based values.\n * Values are provided via BadgeProvider context.\n */\nexport interface BadgeConfigProvider {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * Slug to look up in the BadgeProvider values.\n   * If not specified, defaults to the item's id/slug.\n   */\n  slug?: string\n  type: 'provider'\n}\n\n/**\n * Badge configuration for automatic collection document count.\n * Fetches from /api/{collectionSlug}?limit=0 and uses totalDocs.\n */\nexport interface BadgeConfigCollectionCount {\n  /**\n   * Collection slug to count documents from.\n   * If not specified, defaults to the item's slug.\n   */\n  collectionSlug?: CollectionSlug\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  type: 'collection-count'\n  /**\n   * Optional where query to filter documents.\n   * Will be serialized as query string.\n   * @example { status: { equals: 'draft' } }\n   */\n  where?: Where\n}\n\n/**\n * Badge configuration - union of all badge types\n */\nexport type BadgeConfig = BadgeConfigApi | BadgeConfigCollectionCount | BadgeConfigProvider\n\n/**\n * Badge values provided via BadgeProvider context\n */\nexport type BadgeValues = Record<string, number | ReactNode>\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport interface SidebarTabContent {\n  /**\n   * Badge configuration for this tab.\n   * Shows a badge on the tab icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /**\n   * Collections to show in this tab.\n   * If not specified, no collections are shown (unless items are specified).\n   * Use collection slugs.\n   */\n  collections?: CollectionSlug[]\n  /**\n   * Custom items to add to this tab.\n   * Items with `group` will be merged into matching collection groups.\n   * Items without `group` will be shown at the bottom as a flat list.\n   */\n  customItems?: SidebarTabItem[]\n  /**\n   * Globals to show in this tab.\n   * If not specified, no globals are shown.\n   * Use global slugs.\n   */\n  globals?: GlobalSlug[]\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier for the tab */\n  id: string\n  /** Tooltip/label for the tab */\n  label: LocalizedString\n  type: 'tab'\n}\n\ninterface SidebarTabLinkBase {\n  /**\n   * Badge configuration for this link.\n   * Shows a badge on the link icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier */\n  id: string\n  /** Tooltip/label */\n  label: LocalizedString\n  type: 'link'\n}\ninterface SidebarTabLinkExternal extends SidebarTabLinkBase {\n  /** Link href (absolute URL) */\n  href: string\n  isExternal: true\n}\ninterface SidebarTabLinkInternal extends SidebarTabLinkBase {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  isExternal?: false\n}\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A tab or link in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n  /**\n   * Group to add this item to.\n   * If matches an existing collection group label, item will be merged into that group.\n   * If no match found, a new group will be created.\n   * If not specified, item will be shown at the bottom as ungrouped.\n   */\n  group?: LocalizedString\n  /** Display label */\n  label: LocalizedString\n  /** Unique slug for the item */\n  slug: string\n}\ninterface ExternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (absolute URL or relative to root) */\n  href: string\n  /** Whether the link is external, without admin route prefix. */\n  isExternal: true\n}\n\ninterface InternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  /** Whether the link is external, without admin route prefix. */\n  isExternal?: false\n}\n/**\n * Custom item inside a sidebar tab\n */\nexport type SidebarTabItem = ExternalHrefItem | InternalHrefItem\n\n/**\n * Configuration for the enhanced sidebar\n */\nexport interface EnhancedSidebarConfig {\n  /**\n   * Badge configurations for sidebar items (collections, globals, custom items).\n   * Key is the slug of the item.\n   *\n   * @example\n   * ```typescript\n   * badges: {\n   *   'posts': { type: 'collection-count', color: 'primary' },\n   *   'orders': { type: 'api', endpoint: '/api/orders/pending', responseKey: 'count' },\n   *   'notifications': { type: 'provider', color: 'error' },\n   * }\n   * ```\n   */\n  badges?: Record<string, BadgeConfig>\n\n  /**\n   * Disable the plugin\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Custom icons for collections and globals in the default tab.\n   */\n  icons?: {\n    collections?: Partial<Record<CollectionSlug, IconName>>\n    globals?: Partial<Record<GlobalSlug, IconName>>\n  }\n\n  /**\n   * Show logout button at the bottom of the tabs bar.\n   * @default true\n   */\n  showLogout?: boolean\n\n  /**\n   * Tabs and links to show in the sidebar tabs bar.\n   * Order matters - items are rendered top to bottom.\n   *\n   * @default [{ type: 'tab', id: 'default', icon: 'LayoutGrid', label: 'Collections' }]\n   */\n  tabs?: SidebarTab[]\n}\n\n/**\n * Generic document type for collections, with dynamic keys.\n * We assume values are either string or number for simplicity, useAsTitle is making sure of that.\n */\nexport type GenericCollectionDocument = {\n  [key: string]: number | string\n  id: string\n}\n\ninterface BaseExtendedEntity {\n  label: Record<string, string> | string\n  slug: string\n  type: 'collection' | 'custom' | 'global'\n}\n\ninterface InternalExtendedEntity extends BaseExtendedEntity {\n  href?: '' | `/${string}`\n  isExternal?: false\n}\n\ninterface ExternalExtendedEntity extends BaseExtendedEntity {\n  href: string\n  isExternal: true\n}\n\nexport type ExtendedEntity = ExternalExtendedEntity | InternalExtendedEntity\n\nexport type ExtendedGroup = {\n  entities: ExtendedEntity[]\n  label: Record<string, string> | string\n}\n"],"names":[],"mappings":"AAqRA,WAGC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veiag/payload-enhanced-sidebar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "An enhanced sidebar plugin for Payload CMS with tabbed navigation to organize collections and globals.",
   "author": "VeiaG",
   "license": "MIT",
@@ -29,13 +29,13 @@
   ],
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@payloadcms/db-mongodb": "3.37.0",
-    "@payloadcms/db-postgres": "3.37.0",
-    "@payloadcms/db-sqlite": "3.37.0",
+    "@payloadcms/db-mongodb": "3.60.0",
+    "@payloadcms/db-postgres": "3.60.0",
+    "@payloadcms/db-sqlite": "3.60.0",
     "@payloadcms/eslint-config": "3.9.0",
-    "@payloadcms/next": "3.37.0",
-    "@payloadcms/richtext-lexical": "3.37.0",
-    "@payloadcms/ui": "3.37.0",
+    "@payloadcms/next": "3.60.0",
+    "@payloadcms/richtext-lexical": "3.60.0",
+    "@payloadcms/ui": "3.60.0",
     "@playwright/test": "1.56.1",
     "@swc-node/register": "1.10.9",
     "@swc/cli": "0.6.0",
@@ -50,7 +50,7 @@
     "mongodb-memory-server": "10.1.4",
     "next": "15.4.8",
     "open": "^10.1.0",
-    "payload": "3.37.0",
+    "payload": "3.60.0",
     "prettier": "^3.4.2",
     "qs-esm": "7.0.2",
     "react": "19.2.1",
@@ -63,7 +63,7 @@
     "vitest": "^3.1.2"
   },
   "peerDependencies": {
-    "payload": "^3.37.0"
+    "payload": "^3.60.0"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0",
@@ -71,7 +71,7 @@
   },
   "registry": "https://registry.npmjs.org/",
   "dependencies": {
-    "@payloadcms/translations": "^3.37.0",
+    "@payloadcms/translations": "^3.60.0",
     "lucide-react": "^0.556.0"
   },
   "scripts": {