tessl/npm-payloadcms--ui

UI components library for Payload CMS providing React components, hooks, forms, and styling for building admin interfaces and extensible UI elements.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Context Providers

Name: tessl/npm-payloadcms--ui
Author: tessl

Provider components for managing global state including authentication, configuration, themes, data flow, and UI state in Payload CMS admin interfaces.

Core Providers

RootProvider

Root provider that wraps all other context providers for the admin interface.

interface RootProviderProps {
  children: React.ReactNode;
}

function RootProvider(props: RootProviderProps): JSX.Element;

Usage example:

import { RootProvider } from '@payloadcms/ui';

function AdminApp() {
  return (
    <RootProvider>
      {/* All other providers and app content */}
    </RootProvider>
  );
}

ConfigProvider

Provides Payload configuration context to child components.

interface ConfigProviderProps {
  children: React.ReactNode;
  config: ClientConfig;
}

function ConfigProvider(props: ConfigProviderProps): JSX.Element;

function useConfig(): ClientConfigContext;

interface ClientConfigContext {
  config: ClientConfig;
  getEntityConfig: (slug: string, type: 'collections' | 'globals') => EntityConfig | null;
  setConfig: (config: ClientConfig) => void;
}

AuthProvider

Authentication state and methods provider.

interface AuthProviderProps {
  children: React.ReactNode;
  user?: ClientUser;
  permissions?: SanitizedPermissions;
}

function AuthProvider(props: AuthProviderProps): JSX.Element;

function useAuth<T = any>(): AuthContext<T>;

interface AuthContext<T> {
  user: T | null;
  token?: string;
  permissions?: SanitizedPermissions;
  logOut: () => Promise<void>;
  refreshCookie: () => Promise<void>;
  setUser: (user: T | null) => void;
  strategy?: string;
}

Usage example:

import { AuthProvider, useAuth } from '@payloadcms/ui';

function AdminWrapper() {
  const { user, logOut } = useAuth();
  
  return (
    <div>
      {user ? (
        <div>
          Welcome, {user.email}
          <button onClick={logOut}>Logout</button>
        </div>
      ) : (
        <div>Please log in</div>
      )}
    </div>
  );
}

TranslationProvider

Internationalization context for multi-language support.

interface TranslationProviderProps {
  children: React.ReactNode;
}

function TranslationProvider(props: TranslationProviderProps): JSX.Element;

function useTranslation(): TranslationContext;

interface TranslationContext {
  t: (key: string, options?: Record<string, unknown>) => string;
  i18n: {
    language: string;
    languages: string[];
    changeLanguage: (lang: string) => void;
  };
}

LocaleProvider

Current locale context provider.

interface LocaleProviderProps {
  children: React.ReactNode;
  locale?: string;
}

function LocaleProvider(props: LocaleProviderProps): JSX.Element;

function useLocale(): LocaleContext;

interface LocaleContext {
  locale: string;
  setLocale: (locale: string) => void;
}

UI State Providers

ThemeProvider

Theme configuration and switching provider.

interface ThemeProviderProps {
  children: React.ReactNode;
  theme?: 'light' | 'dark' | 'auto';
}

function ThemeProvider(props: ThemeProviderProps): JSX.Element;

function useTheme(): ThemeContext;

interface ThemeContext {
  theme: Theme;
  setTheme: (theme: 'light' | 'dark' | 'auto') => void;
  autoMode: boolean;
}

WindowInfoProvider

Window size and breakpoint information provider.

interface WindowInfoProviderProps {
  children: React.ReactNode;
}

function WindowInfoProvider(props: WindowInfoProviderProps): JSX.Element;

function useWindowInfo(): WindowInfoContext;

interface WindowInfoContext {
  width: number;
  height: number;
  breakpoint: {
    s: boolean;
    m: boolean;
    l: boolean;
  };
}

RouteTransitionProvider

Route transition animations provider.

interface RouteTransitionProviderProps {
  children: React.ReactNode;
}

function RouteTransitionProvider(props: RouteTransitionProviderProps): JSX.Element;

function useRouteTransition(): RouteTransitionContext;

interface RouteTransitionContext {
  inProgress: boolean;
  start: () => void;
  complete: () => void;
}

ScrollInfoProvider

Scroll position information provider.

interface ScrollInfoProviderProps {
  children: React.ReactNode;
}

function ScrollInfoProvider(props: ScrollInfoProviderProps): JSX.Element;

function useScrollInfo(): ScrollInfoContext;

interface ScrollInfoContext {
  y: number;
  x: number;
  direction: 'up' | 'down' | 'left' | 'right' | null;
}

Document and Form Providers

DocumentInfoProvider

Current document metadata provider.

interface DocumentInfoProviderProps {
  children: React.ReactNode;
  id?: string | number;
  collection?: string;
  global?: string;
}

function DocumentInfoProvider(props: DocumentInfoProviderProps): JSX.Element;

function useDocumentInfo(): DocumentInfoContext;

interface DocumentInfoContext {
  id?: string | number;
  collection?: string;
  global?: string;
  hasPublishedDoc?: boolean;
  unpublishedVersions?: number;
  publishedVersions?: number;
  mostRecentVersionIsAutosaved?: boolean;
  initialState?: Record<string, unknown>;
}

DocumentEventsProvider

Document-level event handling provider.

interface DocumentEventsProviderProps {
  children: React.ReactNode;
}

function DocumentEventsProvider(props: DocumentEventsProviderProps): JSX.Element;

function useDocumentEvents(): DocumentEventsContext;

interface DocumentEventsContext {
  mostRecentUpdate: number;
  triggerUpdate: () => void;
}

OperationProvider

Current CRUD operation context provider.

interface OperationProviderProps {
  children: React.ReactNode;
  operation: 'create' | 'update';
}

function OperationProvider(props: OperationProviderProps): JSX.Element;

function useOperation(): string;

EditDepthProvider

Nested edit depth tracking provider.

interface EditDepthProviderProps {
  children: React.ReactNode;
  depth?: number;
}

function EditDepthProvider(props: EditDepthProviderProps): JSX.Element;

function useEditDepth(): number;

Data Providers

ListQueryProvider

List query and filtering state provider.

interface ListQueryProviderProps {
  children: React.ReactNode;
  defaultSort?: string;
  defaultWhere?: Record<string, unknown>;
  defaultLimit?: number;
}

function ListQueryProvider(props: ListQueryProviderProps): JSX.Element;

function useListQuery(): ListQueryContext;

interface ListQueryContext {
  data: ListResult;
  query: ListQuery;
  refetch: () => Promise<void>;
  isLoading: boolean;
  error?: string;
  updateQuery: (query: Partial<ListQuery>) => void;
}

SelectionProvider

Multi-select state management provider.

interface SelectionProviderProps {
  children: React.ReactNode;
  docs: Record<string, unknown>[];
}

function SelectionProvider(props: SelectionProviderProps): JSX.Element;

function useSelection(): SelectionContext;

interface SelectionContext {
  selected: Map<string, Record<string, unknown>>;
  selectAll: () => void;
  deselectAll: () => void;
  toggleSelection: (id: string) => void;
  isSelected: (id: string) => boolean;
  count: number;
}

PreferencesProvider

User preferences storage provider.

interface PreferencesProviderProps {
  children: React.ReactNode;
}

function PreferencesProvider(props: PreferencesProviderProps): JSX.Element;

function usePreferences(): PreferencesContext;

interface PreferencesContext {
  getPreference: <T = any>(key: string) => T;
  setPreference: <T = any>(key: string, value: T) => void;
}

ParamsProvider

Route parameters context provider.

interface ParamsProviderProps {
  children: React.ReactNode;
  params: Record<string, string>;
}

function ParamsProvider(props: ParamsProviderProps): JSX.Element;

function useParams(): Record<string, string>;

Advanced Providers

ServerFunctionsProvider

Server-side function execution provider.

interface ServerFunctionsProviderProps {
  children: React.ReactNode;
}

function ServerFunctionsProvider(props: ServerFunctionsProviderProps): JSX.Element;

function useServerFunctions(): ServerFunctionsContext;

interface ServerFunctionsContext {
  renderDocument: RenderDocumentServerFunction;
  [key: string]: (...args: any[]) => any;
}

type RenderDocumentServerFunction = (
  args: RenderDocumentArgs
) => Promise<RenderDocumentResult>;

interface RenderDocumentArgs {
  id?: string | number;
  collection?: string;
  global?: string;
  locale?: string;
  fallbackLocale?: string;
  depth?: number;
  overrides?: Record<string, unknown>;
}

interface RenderDocumentResult {
  doc: Record<string, unknown>;
  permissions: Record<string, unknown>;
}

ClientFunctionProvider

Client-side function registry provider.

interface ClientFunctionProviderProps {
  children: React.ReactNode;
}

function ClientFunctionProvider(props: ClientFunctionProviderProps): JSX.Element;

function useClientFunctions(): ClientFunctionsContext;
function useAddClientFunction(): (name: string, func: Function) => void;

interface ClientFunctionsContext {
  [key: string]: Function;
}

ActionsProvider

Global actions registry provider.

interface ActionsProviderProps {
  children: React.ReactNode;
}

function ActionsProvider(props: ActionsProviderProps): JSX.Element;

function useActions(): ActionsContext;

interface ActionsContext {
  setViewActions: (actions: ViewAction[]) => void;
  getViewActions: () => ViewAction[];
}

LivePreviewProvider

Live preview functionality provider.

interface LivePreviewProviderProps {
  children: React.ReactNode;
}

function LivePreviewProvider(props: LivePreviewProviderProps): JSX.Element;

SearchParamsProvider

URL search parameters provider.

interface SearchParamsProviderProps {
  children: React.ReactNode;
  searchParams: Record<string, string>;
}

function SearchParamsProvider(props: SearchParamsProviderProps): JSX.Element;

function useSearchParams(): SearchParamsContext;

interface SearchParamsContext {
  searchParams: Record<string, string>;
  replace: (params: Record<string, string>) => void;
  push: (params: Record<string, string>) => void;
}

Upload and File Providers

UploadHandlersProvider

Upload handling functions provider.

interface UploadHandlersProviderProps {
  children: React.ReactNode;
}

function UploadHandlersProvider(props: UploadHandlersProviderProps): JSX.Element;

function useUploadHandlers(): UploadHandlersContext;

interface UploadHandlersContext {
  upload: (files: File[]) => Promise<UploadResult[]>;
  replace: (id: string, file: File) => Promise<UploadResult>;
  remove: (id: string) => Promise<void>;
}

UploadEditsProvider

Upload editing state provider.

interface UploadEditsProviderProps {
  children: React.ReactNode;
}

function UploadEditsProvider(props: UploadEditsProviderProps): JSX.Element;

function useUploadEdits(): UploadEditsContext;

interface UploadEditsContext {
  edits: UploadEdit[];
  addEdit: (edit: UploadEdit) => void;
  removeEdit: (id: string) => void;
  applyEdits: () => Promise<void>;
}

Provider Composition Example

import {
  RootProvider,
  ConfigProvider,
  AuthProvider,
  ThemeProvider,
  TranslationProvider,
  WindowInfoProvider
} from '@payloadcms/ui';

function AdminApp({ config, user, locale = 'en' }) {
  return (
    <RootProvider>
      <ConfigProvider config={config}>
        <AuthProvider user={user}>
          <ThemeProvider theme="auto">
            <TranslationProvider>
              <WindowInfoProvider>
                <LocaleProvider locale={locale}>
                  <YourAdminInterface />
                </LocaleProvider>
              </WindowInfoProvider>
            </TranslationProvider>
          </ThemeProvider>
        </AuthProvider>
      </ConfigProvider>
    </RootProvider>
  );
}

Types

interface ClientConfig {
  routes: {
    admin: string;
    api: string;
  };
  collections: CollectionConfig[];
  globals: GlobalConfig[];
  localization?: LocalizationConfig;
  admin: AdminConfig;
}

interface ClientUser {
  id: string;
  email?: string;
  [key: string]: unknown;
}

interface SanitizedPermissions {
  collections: Record<string, CollectionPermission>;
  globals: Record<string, GlobalPermission>;
  canAccessAdmin: boolean;
}

interface CollectionPermission {
  create: boolean;
  read: boolean;
  update: boolean;
  delete: boolean;
}

interface GlobalPermission {
  read: boolean;
  update: boolean;
}

interface Theme {
  name: string;
  colors: Record<string, string>;
  breakpoints: Record<string, string>;
}

interface EntityConfig {
  slug: string;
  labels: {
    singular: string;
    plural: string;
  };
  fields: FieldConfig[];
}

interface ListResult {
  docs: Record<string, unknown>[];
  totalDocs: number;
  totalPages: number;
  page: number;
  limit: number;
  hasNextPage: boolean;
  hasPrevPage: boolean;
}

interface ListQuery {
  where?: Record<string, unknown>;
  sort?: string;
  limit?: number;
  page?: number;
}

interface ViewAction {
  id: string;
  label: string;
  handler: () => void;
}

interface UploadResult {
  id: string;
  filename: string;
  mimeType: string;
  filesize: number;
}

interface UploadEdit {
  id: string;
  type: 'crop' | 'resize' | 'rotate';
  params: Record<string, unknown>;
}

Install with Tessl CLI