@veiag/payload-enhanced-sidebar 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -5,4 +5,4 @@ export { BadgeProvider, useBadgeContext, useBadgeValue, } from './components/Enh
5
5
  export { useEnhancedSidebar } from './components/EnhancedSidebar/context.js';
6
6
  export { useNavItemState } from './components/EnhancedSidebar/hooks/useNavItemState.js';
7
7
  export { useTabState } from './components/EnhancedSidebar/hooks/useTabState.js';
8
- export type { BadgeColor, BadgeConfig, BadgeConfigApi, BadgeConfigCollectionCount, BadgeConfigProvider, BadgeValues, CustomNavContentProps, CustomNavGroupProps, CustomNavItemProps, CustomTabButtonProps, CustomTabIconProps, CustomTabsBarComponentProps, EnhancedSidebarConfig, ItemAccessFunction, SidebarComponent, SidebarTabCustom, TabAccessFunction, } from './types.js';
8
+ export type { BadgeColor, BadgeConfig, BadgeConfigApi, BadgeConfigCollectionCount, BadgeConfigProvider, BadgeValues, CustomNavContentProps, CustomNavGroupProps, CustomNavItemProps, CustomTabButtonProps, CustomTabIconProps, CustomTabsBarComponentProps, EnhancedSidebarConfig, ItemAccessFunction, SidebarComponent, SidebarTabCustom, SidebarTabContent, SidebarTabLink, SidebarTabItem, IconName, TabAccessFunction, TabIconConfig, } from './types.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { type Config, deepMerge } from 'payload'\n\nimport type { EnhancedSidebarConfig } from './types.js'\n\nimport { sidebarTranslations } from './translations/index.js'\nimport { resolveSidebarComponent, sanitizeSidebarConfig } from './utils/index.js'\n\n/**\n * Default configuration for the enhanced sidebar\n */\nconst defaultConfig: EnhancedSidebarConfig = {\n showLogout: true,\n tabs: [\n {\n id: 'dashboard',\n type: 'link',\n href: '/',\n icon: 'House',\n label: { en: 'Dashboard', uk: 'Головна' },\n },\n {\n id: 'default',\n type: 'tab',\n icon: 'LayoutGrid',\n label: { en: 'Collections', uk: 'Колекції' },\n },\n ],\n}\n\nexport const payloadEnhancedSidebar =\n (pluginOptions: EnhancedSidebarConfig = {}) =>\n (config: Config): Config => {\n if (pluginOptions.disabled) {\n return config\n }\n\n const sidebarConfig: EnhancedSidebarConfig = {\n ...defaultConfig,\n ...pluginOptions,\n tabs: pluginOptions.tabs ?? defaultConfig.tabs,\n }\n\n if (!config.admin) {\n config.admin = {}\n }\n\n if (!config.admin.components) {\n config.admin.components = {}\n }\n\n // Always override Nav — user-defined Nav in config should use customComponents instead\n config.admin.components.Nav = {\n path: '@veiag/payload-enhanced-sidebar/rsc#EnhancedSidebar',\n serverProps: {\n sidebarConfig,\n },\n }\n\n // Register custom components and per-tab icons in the import map\n if (!config.admin.dependencies) {\n config.admin.dependencies = {}\n }\n\n const customComponentSlots = ['NavContent', 'NavGroup', 'NavItem', 'TabButton'] as const\n for (const slot of customComponentSlots) {\n const component = sidebarConfig.customComponents?.[slot]\n if (component) {\n const { path } = resolveSidebarComponent(component)\n config.admin.dependencies[`enhanced-sidebar-${slot.toLowerCase()}`] = {\n type: 'component',\n path,\n }\n }\n }\n\n const seenTabIds = new Set<string>()\n for (const tab of sidebarConfig.tabs ?? []) {\n if (seenTabIds.has(tab.id)) {\n throw new Error(\n `[payload-enhanced-sidebar] Duplicate tab id \"${tab.id}\". Each tab must have a unique id.`,\n )\n }\n seenTabIds.add(tab.id)\n\n if (tab.type === 'custom') {\n const { path } = resolveSidebarComponent(tab.component)\n config.admin.dependencies[`enhanced-sidebar-custom-tab-${tab.id}`] = {\n type: 'component',\n path,\n }\n } else if (tab.iconComponent) {\n const { path } = resolveSidebarComponent(tab.iconComponent)\n config.admin.dependencies[`enhanced-sidebar-icon-${tab.id}`] = {\n type: 'component',\n path,\n }\n }\n }\n\n // Check if we have any badges to fetch (api or collection-count)\n const hasBadgesToFetch =\n sidebarConfig.badges ||\n sidebarConfig.tabs?.some(\n (tab) => tab.type !== 'custom' && tab.badge && tab.badge.type !== 'provider',\n )\n\n // Add InternalBadgeProvider if we have badges to fetch\n if (hasBadgesToFetch) {\n if (!config.admin.components.providers) {\n config.admin.components.providers = []\n }\n\n // Add our internal provider at the beginning (so user providers can override)\n config.admin.components.providers.unshift({\n clientProps: {\n sidebarConfig: sanitizeSidebarConfig(sidebarConfig),\n },\n path: '@veiag/payload-enhanced-sidebar/client#InternalBadgeProvider',\n })\n }\n\n // Adding translations\n if (!config.i18n) {\n config.i18n = {}\n }\n if (!config.i18n.translations) {\n config.i18n.translations = {}\n }\n\n config.i18n.translations = deepMerge(config.i18n.translations, sidebarTranslations)\n\n return config\n }\n\nexport {\n BadgeProvider,\n useBadgeContext,\n useBadgeValue,\n} from './components/EnhancedSidebar/BadgeProvider/index.js'\n\nexport { useEnhancedSidebar } from './components/EnhancedSidebar/context.js'\nexport { useNavItemState } from './components/EnhancedSidebar/hooks/useNavItemState.js'\nexport { useTabState } from './components/EnhancedSidebar/hooks/useTabState.js'\n\nexport type {\n BadgeColor,\n BadgeConfig,\n BadgeConfigApi,\n BadgeConfigCollectionCount,\n BadgeConfigProvider,\n BadgeValues,\n CustomNavContentProps,\n CustomNavGroupProps,\n CustomNavItemProps,\n CustomTabButtonProps,\n CustomTabIconProps,\n CustomTabsBarComponentProps,\n EnhancedSidebarConfig,\n ItemAccessFunction,\n SidebarComponent,\n SidebarTabCustom,\n TabAccessFunction,\n} from './types.js'\n"],"names":["deepMerge","sidebarTranslations","resolveSidebarComponent","sanitizeSidebarConfig","defaultConfig","showLogout","tabs","id","type","href","icon","label","en","uk","payloadEnhancedSidebar","pluginOptions","config","disabled","sidebarConfig","admin","components","Nav","path","serverProps","dependencies","customComponentSlots","slot","component","customComponents","toLowerCase","seenTabIds","Set","tab","has","Error","add","iconComponent","hasBadgesToFetch","badges","some","badge","providers","unshift","clientProps","i18n","translations","BadgeProvider","useBadgeContext","useBadgeValue","useEnhancedSidebar","useNavItemState","useTabState"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { type Config, deepMerge } from 'payload'\n\nimport type { EnhancedSidebarConfig } from './types.js'\n\nimport { sidebarTranslations } from './translations/index.js'\nimport { resolveSidebarComponent, sanitizeSidebarConfig } from './utils/index.js'\n\n/**\n * Default configuration for the enhanced sidebar\n */\nconst defaultConfig: EnhancedSidebarConfig = {\n showLogout: true,\n tabs: [\n {\n id: 'dashboard',\n type: 'link',\n href: '/',\n icon: 'House',\n label: { en: 'Dashboard', uk: 'Головна' },\n },\n {\n id: 'default',\n type: 'tab',\n icon: 'LayoutGrid',\n label: { en: 'Collections', uk: 'Колекції' },\n },\n ],\n}\n\nexport const payloadEnhancedSidebar =\n (pluginOptions: EnhancedSidebarConfig = {}) =>\n (config: Config): Config => {\n if (pluginOptions.disabled) {\n return config\n }\n\n const sidebarConfig: EnhancedSidebarConfig = {\n ...defaultConfig,\n ...pluginOptions,\n tabs: pluginOptions.tabs ?? defaultConfig.tabs,\n }\n\n if (!config.admin) {\n config.admin = {}\n }\n\n if (!config.admin.components) {\n config.admin.components = {}\n }\n\n // Always override Nav — user-defined Nav in config should use customComponents instead\n config.admin.components.Nav = {\n path: '@veiag/payload-enhanced-sidebar/rsc#EnhancedSidebar',\n serverProps: {\n sidebarConfig,\n },\n }\n\n // Register custom components and per-tab icons in the import map\n if (!config.admin.dependencies) {\n config.admin.dependencies = {}\n }\n\n const customComponentSlots = ['NavContent', 'NavGroup', 'NavItem', 'TabButton'] as const\n for (const slot of customComponentSlots) {\n const component = sidebarConfig.customComponents?.[slot]\n if (component) {\n const { path } = resolveSidebarComponent(component)\n config.admin.dependencies[`enhanced-sidebar-${slot.toLowerCase()}`] = {\n type: 'component',\n path,\n }\n }\n }\n\n const seenTabIds = new Set<string>()\n for (const tab of sidebarConfig.tabs ?? []) {\n if (seenTabIds.has(tab.id)) {\n throw new Error(\n `[payload-enhanced-sidebar] Duplicate tab id \"${tab.id}\". Each tab must have a unique id.`,\n )\n }\n seenTabIds.add(tab.id)\n\n if (tab.type === 'custom') {\n const { path } = resolveSidebarComponent(tab.component)\n config.admin.dependencies[`enhanced-sidebar-custom-tab-${tab.id}`] = {\n type: 'component',\n path,\n }\n } else if (tab.iconComponent) {\n const { path } = resolveSidebarComponent(tab.iconComponent)\n config.admin.dependencies[`enhanced-sidebar-icon-${tab.id}`] = {\n type: 'component',\n path,\n }\n }\n }\n\n // Check if we have any badges to fetch (api or collection-count)\n const hasBadgesToFetch =\n sidebarConfig.badges ||\n sidebarConfig.tabs?.some(\n (tab) => tab.type !== 'custom' && tab.badge && tab.badge.type !== 'provider',\n )\n\n // Add InternalBadgeProvider if we have badges to fetch\n if (hasBadgesToFetch) {\n if (!config.admin.components.providers) {\n config.admin.components.providers = []\n }\n\n // Add our internal provider at the beginning (so user providers can override)\n config.admin.components.providers.unshift({\n clientProps: {\n sidebarConfig: sanitizeSidebarConfig(sidebarConfig),\n },\n path: '@veiag/payload-enhanced-sidebar/client#InternalBadgeProvider',\n })\n }\n\n // Adding translations\n if (!config.i18n) {\n config.i18n = {}\n }\n if (!config.i18n.translations) {\n config.i18n.translations = {}\n }\n\n config.i18n.translations = deepMerge(config.i18n.translations, sidebarTranslations)\n\n return config\n }\n\nexport {\n BadgeProvider,\n useBadgeContext,\n useBadgeValue,\n} from './components/EnhancedSidebar/BadgeProvider/index.js'\n\nexport { useEnhancedSidebar } from './components/EnhancedSidebar/context.js'\nexport { useNavItemState } from './components/EnhancedSidebar/hooks/useNavItemState.js'\nexport { useTabState } from './components/EnhancedSidebar/hooks/useTabState.js'\n\nexport type {\n BadgeColor,\n BadgeConfig,\n BadgeConfigApi,\n BadgeConfigCollectionCount,\n BadgeConfigProvider,\n BadgeValues,\n CustomNavContentProps,\n CustomNavGroupProps,\n CustomNavItemProps,\n CustomTabButtonProps,\n CustomTabIconProps,\n CustomTabsBarComponentProps,\n EnhancedSidebarConfig,\n ItemAccessFunction,\n SidebarComponent,\n SidebarTabCustom,\n SidebarTabContent,\n SidebarTabLink,\n SidebarTabItem,\n IconName,\n TabAccessFunction,\n TabIconConfig,\n} from './types.js'\n"],"names":["deepMerge","sidebarTranslations","resolveSidebarComponent","sanitizeSidebarConfig","defaultConfig","showLogout","tabs","id","type","href","icon","label","en","uk","payloadEnhancedSidebar","pluginOptions","config","disabled","sidebarConfig","admin","components","Nav","path","serverProps","dependencies","customComponentSlots","slot","component","customComponents","toLowerCase","seenTabIds","Set","tab","has","Error","add","iconComponent","hasBadgesToFetch","badges","some","badge","providers","unshift","clientProps","i18n","translations","BadgeProvider","useBadgeContext","useBadgeValue","useEnhancedSidebar","useNavItemState","useTabState"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -125,7 +125,7 @@ export type SidebarComponent = {
125
125
  /**
126
126
  * Mutually exclusive icon config: either a Lucide icon name OR a custom icon component path.
127
127
  */
128
- type TabIconConfig = {
128
+ export type TabIconConfig = {
129
129
  /** Icon name from lucide-react */
130
130
  icon: IconName;
131
131
  iconComponent?: never;
package/dist/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug, PayloadRequest, 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 For 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// Access Control Types\n// ============================================\n\n/**\n * Access function for a tab or link in the tabs bar.\n * Return `false` to hide the item entirely (both the button and its content).\n */\nexport type TabAccessFunction = (args: {\n item: SidebarTab\n req: PayloadRequest\n}) => boolean | Promise<boolean>\n\n/**\n * Access function for a custom item inside a tab.\n * Return `false` to hide the item from the nav.\n */\nexport type ItemAccessFunction = (args: {\n item: SidebarTabItem\n req: PayloadRequest\n}) => boolean | Promise<boolean>\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Path to a component, either as a plain string or as an object with a path and\n * additional client props to forward to the component. Follows Payload's component format.\n *\n * @example\n * ```typescript\n * // Simple path\n * iconComponent: './components/Icons#TabIcon'\n *\n * // With client props — useful for a single component shared across all tabs\n * iconComponent: {\n * path: './components/Icons#TabIcon',\n * clientProps: { icon: 'house' },\n * }\n * ```\n */\nexport type SidebarComponent =\n | {\n /** Additional props forwarded to the component on the client */\n clientProps?: Record<string, unknown>\n /** Component path in Payload's format: `'./path/to/file#ExportName'` */\n path: string\n }\n | string\n\n/**\n * Mutually exclusive icon config: either a Lucide icon name OR a custom icon component path.\n */\ntype TabIconConfig =\n | {\n /** Icon name from lucide-react */\n icon: IconName\n iconComponent?: never\n }\n | {\n icon?: never\n /**\n * Path to a custom icon component. Receives `CustomTabIconProps`.\n * Supports a plain string path or `{ path, clientProps }` to forward extra props.\n * Registered automatically in the import map.\n */\n iconComponent: SidebarComponent\n }\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport type SidebarTabContent = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this tab (button + content) entirely.\n */\n access?: TabAccessFunction\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 /** Unique identifier for the tab */\n id: string\n /** Tooltip/label for the tab */\n label: LocalizedString\n type: 'tab'\n} & TabIconConfig\n\ntype SidebarTabLinkBase = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this link entirely.\n */\n access?: TabAccessFunction\n /**\n * Badge configuration for this link.\n * Shows a badge on the link icon in the tabs bar.\n */\n badge?: BadgeConfig\n /** Unique identifier */\n id: string\n /** Tooltip/label */\n label: LocalizedString\n type: 'link'\n} & TabIconConfig\ntype SidebarTabLinkExternal = {\n /** Link href (absolute URL) */\n href: string\n isExternal: true\n} & SidebarTabLinkBase\ntype SidebarTabLinkInternal = {\n /** Link href (relative to admin route) */\n href: '' | `/${string}`\n isExternal?: false\n} & SidebarTabLinkBase\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A custom component rendered in the tabs bar (spacer, separator, badge, etc.).\n * Does not open any content — it's purely a visual slot in the tabs column.\n */\nexport type SidebarTabCustom = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this item entirely.\n */\n access?: TabAccessFunction\n /**\n * Component to render. Receives `{ id }` plus any `clientProps` you pass.\n * Supports a plain string path or `{ path, clientProps }`.\n */\n component: SidebarComponent\n /** Unique identifier */\n id: string\n type: 'custom'\n}\n\n/**\n * Props passed to a custom tabs bar component (spacer, separator, etc.).\n */\nexport type CustomTabsBarComponentProps = {\n id: string\n}\n\n/**\n * A tab, link, or custom component in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabCustom | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this item from the nav.\n */\n access?: ItemAccessFunction\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 with this label.\n * If not specified, item will be shown as ungrouped (position controlled by `position`).\n */\n group?: LocalizedString\n /** Display label */\n label: LocalizedString\n /**\n * Where to place this item relative to collection groups in the tab.\n * - `'top'` — appears above all collection/global groups\n * - `'bottom'` — appears below all groups (default)\n *\n * Has no effect on items that are merged into an existing collection group via `group`.\n * For new custom groups (unmatched `group` label), controls whether the group appears\n * at the top or bottom of the nav.\n *\n * @default 'bottom'\n */\n position?: 'bottom' | 'top'\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// Custom Component Types\n// ============================================\n\n/**\n * Props received by a custom NavItem component registered via `customComponents.NavItem`.\n *\n * Use the `useNavItemState(href)` hook to get reactive `isActive` / `isCurrentPage` values.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import { useNavItemState } from '@veiag/payload-enhanced-sidebar'\n * import type { CustomNavItemProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavItem: React.FC<CustomNavItemProps> = ({ entity, href, id, label, badgeConfig }) => {\n * const { isActive, isCurrentPage } = useNavItemState(href)\n * return <a href={href}>{label}</a>\n * }\n * ```\n */\nexport type CustomNavItemProps = {\n /** Badge configuration as defined in the plugin config */\n badgeConfig?: BadgeConfig\n /** The entity (collection, global, or custom item) */\n entity: ExtendedEntity\n /** Computed href with admin route prefix applied */\n href: string\n /** DOM element id */\n id: string\n /** Pre-translated label string */\n label: string\n}\n\n/**\n * Props received by a custom NavGroup component registered via `customComponents.NavGroup`.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomNavGroupProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavGroup: React.FC<CustomNavGroupProps> = ({ label, isOpen, children }) => {\n * return <div><strong>{label}</strong>{children}</div>\n * }\n * ```\n */\nexport type CustomNavGroupProps = {\n /** Nav items inside the group */\n children: ReactNode\n /** Initial open state from nav preferences */\n isOpen?: boolean\n /** Translated group label */\n label: string\n}\n\n/**\n * Props received by a custom tab icon component set via `iconComponent` on a tab or link.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomTabIconProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyIcon: React.FC<CustomTabIconProps> = ({ id, label }) => (\n * <img alt={label} src={`/icons/${id}.svg`} width={20} height={20} />\n * )\n * ```\n */\nexport type CustomTabIconProps = {\n /** Tab/link id */\n id: string\n /** Pre-translated label */\n label: string\n /** Whether this item is a tab or a link */\n type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom TabButton component registered via `customComponents.TabButton`.\n * Used for both `tab` and `link` type items in the tabs bar.\n *\n * Use `useTabState(id)` for tab active state, or `usePathname()` for link active state.\n * Use `useEnhancedSidebar().onTabChange` to trigger tab switches.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomTabButtonProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState, useEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyTabButton: React.FC<CustomTabButtonProps> = ({ id, type, icon, label, href }) => {\n * const { isActive } = useTabState(id)\n * const { onTabChange } = useEnhancedSidebar()\n * if (type === 'link') return <a href={href}>{icon}{label}</a>\n * return <button onClick={() => onTabChange(id)}>{icon}{label}</button>\n * }\n * ```\n */\nexport type CustomTabButtonProps = {\n /** Badge configuration as defined in the plugin config */\n badge?: BadgeConfig\n /** Computed href (for link type, with admin route prefix applied) */\n href?: string\n /** Pre-rendered icon — either from `iconComponent` or the default Lucide icon */\n icon: ReactNode\n /** Tab/link id */\n id: string\n /** Whether the link is external (only set for link type) */\n isExternal?: boolean\n /** Pre-translated label */\n label: string\n /** Item type — use to differentiate rendering */\n type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom NavContent component registered via `customComponents.NavContent`.\n *\n * Renders in place of the default `<nav>` content area. Use the `useTabState(id)` hook\n * to determine which tab is active and show/hide content accordingly.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomNavContentProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState } from '@veiag/payload-enhanced-sidebar'\n *\n * const TabPanel = ({ id, content }: { id: string; content: React.ReactNode }) => {\n * const { isActive } = useTabState(id)\n * return <div style={{ display: isActive ? undefined : 'none' }}>{content}</div>\n * }\n *\n * export const MyNavContent: React.FC<CustomNavContentProps> = ({\n * tabs, tabsContent, beforeNavLinks, afterNavLinks,\n * }) => {\n * return (\n * <nav>\n * {beforeNavLinks}\n * {tabs.map(tab => <TabPanel key={tab.id} id={tab.id} content={tabsContent[tab.id]} />)}\n * {afterNavLinks}\n * </nav>\n * )\n * }\n * ```\n */\nexport type CustomNavContentProps = {\n /** Rendered afterNav from payload config (rendered after afterNavLinks) */\n afterNav?: ReactNode\n /** Rendered afterNavLinks from payload config */\n afterNavLinks?: ReactNode\n /** Content to show when no tabs are defined */\n allContent?: ReactNode\n /** Rendered beforeNav from payload config (rendered before beforeNavLinks) */\n beforeNav?: ReactNode\n /** Rendered beforeNavLinks from payload config */\n beforeNavLinks?: ReactNode\n /** Tab definitions (id only) for mapping over */\n tabs: Array<{ id: string }>\n /** Pre-rendered content per tab id */\n tabsContent: Record<string, ReactNode>\n}\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 * Custom components to replace the default NavItem, NavGroup, and/or NavContent rendering.\n * Each field accepts a plain path string or a `SidebarComponent` object `{ path, clientProps }`\n * to forward additional props. The plugin registers them in the import map automatically.\n *\n * @example\n * ```typescript\n * customComponents: {\n * // Plain path\n * NavItem: './components/MySidebar#MyNavItem',\n * // With extra client props forwarded to the component\n * NavGroup: { path: './components/MySidebar#MyNavGroup', clientProps: { collapsible: true } },\n * }\n * ```\n */\n customComponents?: {\n /**\n * Custom NavContent component. Replaces the default `<nav>` content area.\n * Receives `CustomNavContentProps`. Use `useTabState(id)` to check if a tab is active.\n */\n NavContent?: SidebarComponent\n /** Custom NavGroup component. Receives `CustomNavGroupProps`. */\n NavGroup?: SidebarComponent\n /** Custom NavItem component. Receives `CustomNavItemProps`. */\n NavItem?: SidebarComponent\n /**\n * Custom tab button component. Used for both `tab` and `link` items in the tabs bar.\n * Receives `CustomTabButtonProps`. Use `useTabState(id)` and `useEnhancedSidebar()` for state.\n */\n TabButton?: SidebarComponent\n }\n\n /**\n * Disable the plugin\n * @default false\n */\n disabled?: boolean\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 // 'collections' | 'globals' are EntityType enum values from groupNavItems output; 'custom' is ours\n type: 'collections' | 'custom' | 'globals'\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":"AAykBA,WAGC"}
1
+ {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug, PayloadRequest, 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 For 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// Access Control Types\n// ============================================\n\n/**\n * Access function for a tab or link in the tabs bar.\n * Return `false` to hide the item entirely (both the button and its content).\n */\nexport type TabAccessFunction = (args: {\n item: SidebarTab\n req: PayloadRequest\n}) => boolean | Promise<boolean>\n\n/**\n * Access function for a custom item inside a tab.\n * Return `false` to hide the item from the nav.\n */\nexport type ItemAccessFunction = (args: {\n item: SidebarTabItem\n req: PayloadRequest\n}) => boolean | Promise<boolean>\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Path to a component, either as a plain string or as an object with a path and\n * additional client props to forward to the component. Follows Payload's component format.\n *\n * @example\n * ```typescript\n * // Simple path\n * iconComponent: './components/Icons#TabIcon'\n *\n * // With client props — useful for a single component shared across all tabs\n * iconComponent: {\n * path: './components/Icons#TabIcon',\n * clientProps: { icon: 'house' },\n * }\n * ```\n */\nexport type SidebarComponent =\n | {\n /** Additional props forwarded to the component on the client */\n clientProps?: Record<string, unknown>\n /** Component path in Payload's format: `'./path/to/file#ExportName'` */\n path: string\n }\n | string\n\n/**\n * Mutually exclusive icon config: either a Lucide icon name OR a custom icon component path.\n */\nexport type TabIconConfig =\n | {\n /** Icon name from lucide-react */\n icon: IconName\n iconComponent?: never\n }\n | {\n icon?: never\n /**\n * Path to a custom icon component. Receives `CustomTabIconProps`.\n * Supports a plain string path or `{ path, clientProps }` to forward extra props.\n * Registered automatically in the import map.\n */\n iconComponent: SidebarComponent\n }\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport type SidebarTabContent = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this tab (button + content) entirely.\n */\n access?: TabAccessFunction\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 /** Unique identifier for the tab */\n id: string\n /** Tooltip/label for the tab */\n label: LocalizedString\n type: 'tab'\n} & TabIconConfig\n\ntype SidebarTabLinkBase = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this link entirely.\n */\n access?: TabAccessFunction\n /**\n * Badge configuration for this link.\n * Shows a badge on the link icon in the tabs bar.\n */\n badge?: BadgeConfig\n /** Unique identifier */\n id: string\n /** Tooltip/label */\n label: LocalizedString\n type: 'link'\n} & TabIconConfig\ntype SidebarTabLinkExternal = {\n /** Link href (absolute URL) */\n href: string\n isExternal: true\n} & SidebarTabLinkBase\ntype SidebarTabLinkInternal = {\n /** Link href (relative to admin route) */\n href: '' | `/${string}`\n isExternal?: false\n} & SidebarTabLinkBase\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A custom component rendered in the tabs bar (spacer, separator, badge, etc.).\n * Does not open any content — it's purely a visual slot in the tabs column.\n */\nexport type SidebarTabCustom = {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this item entirely.\n */\n access?: TabAccessFunction\n /**\n * Component to render. Receives `{ id }` plus any `clientProps` you pass.\n * Supports a plain string path or `{ path, clientProps }`.\n */\n component: SidebarComponent\n /** Unique identifier */\n id: string\n type: 'custom'\n}\n\n/**\n * Props passed to a custom tabs bar component (spacer, separator, etc.).\n */\nexport type CustomTabsBarComponentProps = {\n id: string\n}\n\n/**\n * A tab, link, or custom component in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabCustom | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n /**\n * Access control function. Called server-side with the current request.\n * Return `false` to hide this item from the nav.\n */\n access?: ItemAccessFunction\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 with this label.\n * If not specified, item will be shown as ungrouped (position controlled by `position`).\n */\n group?: LocalizedString\n /** Display label */\n label: LocalizedString\n /**\n * Where to place this item relative to collection groups in the tab.\n * - `'top'` — appears above all collection/global groups\n * - `'bottom'` — appears below all groups (default)\n *\n * Has no effect on items that are merged into an existing collection group via `group`.\n * For new custom groups (unmatched `group` label), controls whether the group appears\n * at the top or bottom of the nav.\n *\n * @default 'bottom'\n */\n position?: 'bottom' | 'top'\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// Custom Component Types\n// ============================================\n\n/**\n * Props received by a custom NavItem component registered via `customComponents.NavItem`.\n *\n * Use the `useNavItemState(href)` hook to get reactive `isActive` / `isCurrentPage` values.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import { useNavItemState } from '@veiag/payload-enhanced-sidebar'\n * import type { CustomNavItemProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavItem: React.FC<CustomNavItemProps> = ({ entity, href, id, label, badgeConfig }) => {\n * const { isActive, isCurrentPage } = useNavItemState(href)\n * return <a href={href}>{label}</a>\n * }\n * ```\n */\nexport type CustomNavItemProps = {\n /** Badge configuration as defined in the plugin config */\n badgeConfig?: BadgeConfig\n /** The entity (collection, global, or custom item) */\n entity: ExtendedEntity\n /** Computed href with admin route prefix applied */\n href: string\n /** DOM element id */\n id: string\n /** Pre-translated label string */\n label: string\n}\n\n/**\n * Props received by a custom NavGroup component registered via `customComponents.NavGroup`.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomNavGroupProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavGroup: React.FC<CustomNavGroupProps> = ({ label, isOpen, children }) => {\n * return <div><strong>{label}</strong>{children}</div>\n * }\n * ```\n */\nexport type CustomNavGroupProps = {\n /** Nav items inside the group */\n children: ReactNode\n /** Initial open state from nav preferences */\n isOpen?: boolean\n /** Translated group label */\n label: string\n}\n\n/**\n * Props received by a custom tab icon component set via `iconComponent` on a tab or link.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomTabIconProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyIcon: React.FC<CustomTabIconProps> = ({ id, label }) => (\n * <img alt={label} src={`/icons/${id}.svg`} width={20} height={20} />\n * )\n * ```\n */\nexport type CustomTabIconProps = {\n /** Tab/link id */\n id: string\n /** Pre-translated label */\n label: string\n /** Whether this item is a tab or a link */\n type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom TabButton component registered via `customComponents.TabButton`.\n * Used for both `tab` and `link` type items in the tabs bar.\n *\n * Use `useTabState(id)` for tab active state, or `usePathname()` for link active state.\n * Use `useEnhancedSidebar().onTabChange` to trigger tab switches.\n *\n * @example\n * ```tsx\n * 'use client'\n * import React from 'react'\n * import type { CustomTabButtonProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState, useEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyTabButton: React.FC<CustomTabButtonProps> = ({ id, type, icon, label, href }) => {\n * const { isActive } = useTabState(id)\n * const { onTabChange } = useEnhancedSidebar()\n * if (type === 'link') return <a href={href}>{icon}{label}</a>\n * return <button onClick={() => onTabChange(id)}>{icon}{label}</button>\n * }\n * ```\n */\nexport type CustomTabButtonProps = {\n /** Badge configuration as defined in the plugin config */\n badge?: BadgeConfig\n /** Computed href (for link type, with admin route prefix applied) */\n href?: string\n /** Pre-rendered icon — either from `iconComponent` or the default Lucide icon */\n icon: ReactNode\n /** Tab/link id */\n id: string\n /** Whether the link is external (only set for link type) */\n isExternal?: boolean\n /** Pre-translated label */\n label: string\n /** Item type — use to differentiate rendering */\n type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom NavContent component registered via `customComponents.NavContent`.\n *\n * Renders in place of the default `<nav>` content area. Use the `useTabState(id)` hook\n * to determine which tab is active and show/hide content accordingly.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomNavContentProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState } from '@veiag/payload-enhanced-sidebar'\n *\n * const TabPanel = ({ id, content }: { id: string; content: React.ReactNode }) => {\n * const { isActive } = useTabState(id)\n * return <div style={{ display: isActive ? undefined : 'none' }}>{content}</div>\n * }\n *\n * export const MyNavContent: React.FC<CustomNavContentProps> = ({\n * tabs, tabsContent, beforeNavLinks, afterNavLinks,\n * }) => {\n * return (\n * <nav>\n * {beforeNavLinks}\n * {tabs.map(tab => <TabPanel key={tab.id} id={tab.id} content={tabsContent[tab.id]} />)}\n * {afterNavLinks}\n * </nav>\n * )\n * }\n * ```\n */\nexport type CustomNavContentProps = {\n /** Rendered afterNav from payload config (rendered after afterNavLinks) */\n afterNav?: ReactNode\n /** Rendered afterNavLinks from payload config */\n afterNavLinks?: ReactNode\n /** Content to show when no tabs are defined */\n allContent?: ReactNode\n /** Rendered beforeNav from payload config (rendered before beforeNavLinks) */\n beforeNav?: ReactNode\n /** Rendered beforeNavLinks from payload config */\n beforeNavLinks?: ReactNode\n /** Tab definitions (id only) for mapping over */\n tabs: Array<{ id: string }>\n /** Pre-rendered content per tab id */\n tabsContent: Record<string, ReactNode>\n}\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 * Custom components to replace the default NavItem, NavGroup, and/or NavContent rendering.\n * Each field accepts a plain path string or a `SidebarComponent` object `{ path, clientProps }`\n * to forward additional props. The plugin registers them in the import map automatically.\n *\n * @example\n * ```typescript\n * customComponents: {\n * // Plain path\n * NavItem: './components/MySidebar#MyNavItem',\n * // With extra client props forwarded to the component\n * NavGroup: { path: './components/MySidebar#MyNavGroup', clientProps: { collapsible: true } },\n * }\n * ```\n */\n customComponents?: {\n /**\n * Custom NavContent component. Replaces the default `<nav>` content area.\n * Receives `CustomNavContentProps`. Use `useTabState(id)` to check if a tab is active.\n */\n NavContent?: SidebarComponent\n /** Custom NavGroup component. Receives `CustomNavGroupProps`. */\n NavGroup?: SidebarComponent\n /** Custom NavItem component. Receives `CustomNavItemProps`. */\n NavItem?: SidebarComponent\n /**\n * Custom tab button component. Used for both `tab` and `link` items in the tabs bar.\n * Receives `CustomTabButtonProps`. Use `useTabState(id)` and `useEnhancedSidebar()` for state.\n */\n TabButton?: SidebarComponent\n }\n\n /**\n * Disable the plugin\n * @default false\n */\n disabled?: boolean\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 // 'collections' | 'globals' are EntityType enum values from groupNavItems output; 'custom' is ours\n type: 'collections' | 'custom' | 'globals'\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":"AAykBA,WAGC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veiag/payload-enhanced-sidebar",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "An enhanced sidebar plugin for Payload CMS with tabbed navigation to organize collections and globals.",
5
5
  "author": "VeiaG",
6
6
  "license": "MIT",