Application Setup & Core Components

/**
 * Main application wrapper component that provides all Refine contexts
 * @param props - Configuration props for Refine application
 * @returns JSX.Element - Refine application wrapper
 */
function Refine<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>(
  props: RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>
): JSX.Element;

interface RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider> {
  /** Data provider for CRUD operations - can be single provider or provider map */
  dataProvider: TDataProvider | Record<string, TDataProvider>;
  /** Authentication provider for user management */
  authProvider?: TAuthProvider;
  /** Router provider for navigation and routing */
  routerProvider?: TRouterProvider;
  /** Notification provider for showing messages */
  notificationProvider?: TNotificationProvider;
  /** Access control provider for permissions */
  accessControlProvider?: TAccessControlProvider;
  /** Internationalization provider */
  i18nProvider?: TI18nProvider;
  /** Live/realtime provider for subscriptions */
  liveProvider?: TLiveProvider;
  /** Audit log provider for tracking changes */
  auditLogProvider?: TAuditLogProvider;
  /** Resource definitions for the application */
  resources?: ResourceProps[];
  /** Global options for Refine behavior */
  options?: RefineOptions;
  /** Child components to render */
  children?: React.ReactNode;
}

interface RefineOptions {
  /** Mutation mode for optimistic updates */
  mutationMode?: MutationMode;
  /** Timeout for undoable mutations */
  undoableTimeout?: number;
  /** Sync with location for table states */
  syncWithLocation?: boolean;
  /** Warning when leaving unsaved forms */
  warnWhenUnsavedChanges?: boolean;
  /** Project ID for telemetry */
  projectId?: string;
  /** Redirect action after mutations */
  redirect?: {
    afterCreate?: RedirectAction;
    afterClone?: RedirectAction;
    afterEdit?: RedirectAction;
  };
  /** Live mode configuration */
  liveMode?: LiveModeProps;
  /** Disable telemetry */
  disableTelemetry?: boolean;
  /** Show title in browser tab */
  title?: TitleProps;
  /** Override browser document title */
  documentTitleHandler?: DocumentTitleHandler;
  /** React Query devtools configuration */
  reactQuery?: {
    devtoolConfig?: DevToolsConfig | false | DevToolsOptions;
    clientConfig?: QueryClientConfig;
  };
}

import React from "react";
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import authProvider from "./authProvider";

function App() {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      authProvider={authProvider}
      resources={[
        {
          name: "posts",
          list: "/posts",
          create: "/posts/create",
          edit: "/posts/edit/:id",
          show: "/posts/show/:id",
        },
        {
          name: "categories",
          list: "/categories",
          create: "/categories/create",
        },
      ]}
      options={{
        syncWithLocation: true,
        warnWhenUnsavedChanges: true,
        mutationMode: "optimistic",
      }}
    >
      {/* Your app components */}
    </Refine>
  );
}

/**
 * Component form of useAuthenticated hook that conditionally renders content
 * @param props - Authentication check configuration
 * @returns JSX.Element - Conditionally rendered content
 */
function Authenticated(props: AuthenticatedProps): JSX.Element;

interface AuthenticatedProps {
  /** Required key for React reconciliation when multiple instances exist */
  key: React.Key;
  /** Where to redirect on authentication failure - true for default login page */
  redirectOnFail?: string | true;
  /** Whether to append current path as return URL in query params */
  appendCurrentPathToQuery?: boolean;
  /** Fallback content to show when not authenticated */
  fallback?: React.ReactNode;
  /** Loading content to show while checking authentication */
  loading?: React.ReactNode;
  /** Content to render when authenticated */
  children?: React.ReactNode;
  /** Additional parameters for authentication check */
  params?: AuthCheckParams;
}

interface AuthCheckParams {
  [key: string]: any;
}

import React from "react";
import { Authenticated } from "@refinedev/core";
import { LoginPage } from "./LoginPage";

function ProtectedRoute() {
  return (
    <Authenticated
      key="authenticated-app"
      fallback={<LoginPage />}
      loading={<div>Checking authentication...</div>}
    >
      {/* Protected app content */}
      <Dashboard />
    </Authenticated>
  );
}

/**
 * Component wrapper for usecan hook that provides access control
 * @param props - Access control configuration
 * @returns JSX.Element - Conditionally rendered content based on permissions
 */
function CanAccess(props: CanAccessProps): JSX.Element;

interface CanAccessProps {
  /** Resource name to check permissions for */
  resource?: string;
  /** Action to check permissions for */
  action: string;
  /** Additional parameters for permission check */
  params?: CanParams;
  /** Fallback content when access is denied */
  fallback?: React.ReactNode;
  /** Callback when access is unauthorized */
  onUnauthorized?: (props: OnUnauthorizedProps) => void;
  /** Content to render when access is granted */
  children: React.ReactNode;
  /** React Query options for the permission check */
  queryOptions?: UseQueryOptions<CanReturnType>;
}

interface CanParams {
  /** Resource name for permission check */
  resource?: string;
  /** Action name for permission check */
  action?: string;
  /** Additional context data */
  [key: string]: any;
}

interface OnUnauthorizedProps {
  /** Reason for unauthorized access */
  reason?: string;
}

interface CanReturnType {
  /** Whether access is granted */
  can: boolean;
  /** Reason for denial if access is not granted */
  reason?: string;
}

import React from "react";
import { CanAccess } from "@refinedev/core";

function PostActions({ postId }: { postId: string }) {
  return (
    <div>
      <CanAccess
        resource="posts"
        action="edit"
        params={{ id: postId }}
        fallback={<div>No edit permission</div>}
      >
        <button>Edit Post</button>
      </CanAccess>
      
      <CanAccess
        resource="posts"
        action="delete"
        params={{ id: postId }}
        onUnauthorized={() => console.log("Delete not allowed")}
      >
        <button>Delete Post</button>
      </CanAccess>
    </div>
  );
}

/**
 * Default error page component for handling application errors
 * @param props - Error component configuration
 * @returns JSX.Element - Error page display
 */
function ErrorComponent(props?: ErrorComponentProps): JSX.Element;

interface ErrorComponentProps {
  /** Custom error message to display */
  message?: string;
  /** Additional error details */
  details?: string;
}

/**
 * Pre-built authentication page with multiple auth forms
 * @param props - Authentication page configuration
 * @returns JSX.Element - Authentication page with forms
 */
function AuthPage(props?: AuthPageProps): JSX.Element;

interface AuthPageProps {
  /** Type of authentication form to display */
  type?: "login" | "register" | "forgotPassword" | "updatePassword";
  /** Custom form fields configuration */
  formProps?: Record<string, any>;
  /** Custom rendering props */
  renderContent?: (content: React.ReactNode, title: React.ReactNode) => React.ReactNode;
}

interface ResourceProps {
  /** Unique name identifier for the resource */
  name: string;
  /** Optional display label - defaults to name */
  label?: string;
  /** Route path for list page */
  list?: string | React.ComponentType;
  /** Route path for create page */
  create?: string | React.ComponentType;
  /** Route path for edit page */
  edit?: string | React.ComponentType;
  /** Route path for show/detail page */
  show?: string | React.ComponentType;
  /** Route path for clone page */
  clone?: string | React.ComponentType;
  /** Custom icon for the resource */
  icon?: React.ReactNode;
  /** Whether to show in navigation menu */
  canDelete?: boolean;
  /** Additional metadata */
  meta?: Record<string, any>;
  /** Parent resource for nested resources */
  parentName?: string;
}

type MutationMode = "pessimistic" | "optimistic" | "undoable";

type RedirectAction = "list" | "edit" | "show" | "create" | "clone" | false;

interface TitleProps {
  /** Default title */
  text?: string;
  /** Custom icon */
  icon?: React.ReactNode;
}

type DocumentTitleHandler = (params: {
  resource?: string;
  action?: string;
  params?: Record<string, string | number>;
}) => string;

interface LiveModeProps {
  /** Whether to enable live mode */
  enabled?: boolean;
  /** Custom live provider */
  provider?: LiveProvider;
}