tessl/npm-refinedev--core

React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Refine Core

Name: tessl/npm-refinedev--core
Author: tessl

Refine Core is a React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration. It provides a comprehensive set of hooks, components, and utilities for rapid development of data-intensive applications with minimal boilerplate.

Package Information

Package Name: @refinedev/core
Package Type: npm
Language: TypeScript
Installation: npm install @refinedev/core

Core Imports

import { 
  Refine,
  useList,
  useOne,
  useCreate,
  useUpdate,
  useDelete,
  useForm,
  useTable,
  useNavigation
} from "@refinedev/core";

For CommonJS:

const { 
  Refine,
  useList,
  useOne,
  useCreate,
  useUpdate,
  useDelete,
  useForm,
  useTable,
  useNavigation
} = require("@refinedev/core");

Basic Usage

import React from "react";
import { Refine, useList, useCreate } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

// App setup with Refine wrapper
function App() {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "posts",
          list: "/posts",
          create: "/posts/create",
          edit: "/posts/edit/:id",
          show: "/posts/show/:id",
        },
      ]}
    >
      <PostsList />
    </Refine>
  );
}

// Component using Refine hooks
function PostsList() {
  const { data: posts, isLoading } = useList({
    resource: "posts",
    pagination: { pageSize: 10 }
  });
  
  const { mutate: createPost } = useCreate();
  
  const handleCreatePost = () => {
    createPost({
      resource: "posts",
      values: {
        title: "New Post",
        content: "Post content"
      }
    });
  };
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {posts?.data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Architecture

Refine Core is built around several key architectural components:

Provider System: Pluggable providers for data, authentication, routing, notifications, and access control
Hook-Based API: React hooks for all operations, ensuring proper React integration and state management
Resource-Centric: Operations are organized around resources (entities) with automatic routing and parameter inference
Type Safety: Full TypeScript support with generic types for data structures and operations
Query Management: Built on React Query for advanced caching, synchronization, and background updates
Headless UI: Core provides logic and state management while being UI framework agnostic

Capabilities

Application Setup & Core Components

Main application wrapper and foundational components for setting up Refine applications with providers and resource configuration.

interface RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider> {
  dataProvider: TDataProvider | Record<string, TDataProvider>;
  authProvider?: TAuthProvider;
  routerProvider?: TRouterProvider;
  notificationProvider?: TNotificationProvider;
  accessControlProvider?: TAccessControlProvider;
  i18nProvider?: TI18nProvider;
  liveProvider?: TLiveProvider;
  auditLogProvider?: TAuditLogProvider;
  resources?: ResourceProps[];
  options?: RefineOptions;
  children?: React.ReactNode;
}

function Refine<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>(
  props: RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>
): JSX.Element;

Application Setup & Core Components

Data Operations & CRUD Hooks

Comprehensive data management hooks for CRUD operations, custom queries, and real-time data synchronization with built-in caching and state management.

function useList<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params?: UseListConfig<TQueryFnData, TError, TData>
): UseListReturnType<TData, TError>;

function useOne<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params: UseOneConfig<TQueryFnData, TError, TData>
): UseOneReturnType<TData, TError>;

function useCreate<TData = BaseRecord, TError = HttpError, TVariables = {}>(
  params?: UseCreateConfig<TData, TError, TVariables>
): UseCreateReturnType<TData, TError, TVariables>;

function useUpdate<TData = BaseRecord, TError = HttpError, TVariables = {}>(
  params?: UseUpdateConfig<TData, TError, TVariables>
): UseUpdateReturnType<TData, TError, TVariables>;

function useDelete<TData = BaseRecord, TError = HttpError>(
  params?: UseDeleteConfig<TData, TError>
): UseDeleteReturnType<TData, TError>;

Data Operations & CRUD Hooks

Authentication & Authorization

Complete authentication system with login, logout, registration flows, and fine-grained access control for resources and actions.

function useLogin<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLoginConfig<TData, TError, TVariables>
): UseLoginReturnType<TData, TError, TVariables>;

function useLogout<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLogoutConfig<TData, TError, TVariables>
): UseLogoutReturnType<TData, TError, TVariables>;

function useIsAuthenticated<TData = {}>(
  params?: UseIsAuthenticatedConfig<TData>
): UseIsAuthenticatedReturnType<TData>;

function useCan(params: UseCanConfig): UseCanReturnType;

Authentication & Authorization

Navigation & Routing

Programmatic navigation, route parsing, and URL generation with resource-aware navigation utilities for CRUD operations.

function useNavigation(): UseNavigationReturnType;

function useGo(): Go;

function useParsed(): ParsedParams;

interface UseNavigationReturnType {
  list: (resource: string, type?: HistoryType, meta?: Record<string, unknown>) => void;
  create: (resource: string, type?: HistoryType, meta?: Record<string, unknown>) => void;
  edit: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  show: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  clone: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  listUrl: (resource: string, meta?: Record<string, unknown>) => string;
  createUrl: (resource: string, meta?: Record<string, unknown>) => string;
  editUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
  showUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
  cloneUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
}

Navigation & Routing

Forms & Data Input

Advanced form management with auto-save, validation, mutation handling, and integration with popular form libraries.

function useForm<TQueryFnData = BaseRecord, TError = HttpError, TVariables = {}, TData = TQueryFnData, TResponse = BaseRecord, TResponseError = HttpError>(
  params?: UseFormConfig<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>
): UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;

Forms & Data Input

Tables & Lists

Comprehensive table functionality with sorting, filtering, pagination, search, and URL synchronization for data-heavy interfaces.

function useTable<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params?: UseTableConfig<TQueryFnData, TError, TData>
): UseTableReturnType<TData, TError>;

function useSelect<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params: UseSelectConfig<TQueryFnData, TError, TData>
): UseSelectReturnType<TData, TError>;

Tables & Lists

Utilities & Helpers

Resource management, loading states, metadata handling, notifications, and various utility functions for enhanced development experience.

function useResourceParams(params?: UseResourceParamsConfig): UseResourceParamsReturnType;

function useLoadingOvertime(params: UseLoadingOvertimeConfig): UseLoadingOvertimeReturnType;

function useNotification(): UseNotificationReturnType;

function useModal(): UseModalReturnType;

function usePublish(): ((event: LiveEvent) => void) | undefined;

function useSubscription(params: UseSubscriptionConfig): void;

function useLiveMode(): UseLiveModeReturnType;

function useMenu(params?: UseMenuConfig): UseMenuReturnType;

Utilities & Helpers

Types

type BaseKey = string | number;

interface BaseRecord {
  id?: BaseKey;
  [key: string]: any;
}

interface HttpError {
  message: string;
  statusCode: number;
  errors?: ValidationErrors;
}

interface Pagination {
  current?: number;
  pageSize?: number;
  mode?: "server" | "client" | "off";
}

type CrudOperators = 
  | "eq" | "ne" | "lt" | "gt" | "lte" | "gte"
  | "in" | "nin" | "ina" | "nina" | "contains" | "ncontains"
  | "containss" | "ncontainss" | "null" | "nnull"
  | "between" | "nbetween" | "startswith" | "nstartswith"
  | "startswiths" | "nstartswiths" | "endswith" | "nendswith"
  | "endswiths" | "nendswiths" | "or" | "and";

interface CrudFilter {
  field: string;
  operator: CrudOperators;
  value: any;
}

type CrudFilters = CrudFilter[];

type SortOrder = "asc" | "desc";

interface CrudSort {
  field: string;
  order: SortOrder;
}

type CrudSorting = CrudSort[];

interface GetListResponse<TData = BaseRecord> {
  data: TData[];
  total: number;
}

interface GetOneResponse<TData = BaseRecord> {
  data: TData;
}

interface CreateResponse<TData = BaseRecord> {
  data: TData;
}

interface UpdateResponse<TData = BaseRecord> {
  data: TData;
}

interface DeleteOneResponse<TData = BaseRecord> {
  data: TData;
}