@framework-m/desk

Refine providers and UI components for Framework M applications.

Installation

npm install @framework-m/desk

# With pnpm
pnpm add @framework-m/desk

Usage

Basic Setup

import { Refine } from "@refinedev/core";
import {
  frameworkMDataProvider,
  authProvider,
  liveProvider,
} from "@framework-m/desk";

function App() {
  return (
    <Refine
      dataProvider={frameworkMDataProvider}
      authProvider={authProvider}
      liveProvider={liveProvider}
      options={{
        liveMode: "auto", // Enable real-time updates
      }}
      resources={[
        {
          name: "users",
          list: "/users",
          create: "/users/create",
          edit: "/users/edit/:id",
        },
      ]}
    >
      {/* Define your app routes */}
    </Refine>
  );
}

Available Exports

Providers

• frameworkMDataProvider: DataProvider for CRUD operations
• authProvider: Cookie-based authentication
• liveProvider: WebSocket real-time updates

Configuration

• API_URL: Base API URL (default: /api/v1)
• META_URL: Meta API URL (default: /api/meta)
• WS_URL: WebSocket URL (default: /api/v1/stream)

Types

• ListResponse<T>: Paginated list response
• BaseDocument: Base document fields
• UserIdentity: User identity object
• ApiError: API error response
• FilterOperator: Supported filter operators
• SortOrder: Sort direction

Custom Configuration

Override default endpoints via window.__FRAMEWORK_CONFIG__:

<script>
  window.__FRAMEWORK_CONFIG__ = {
    apiBaseUrl: "https://api.example.com/v1",
    wsBaseUrl: "wss://api.example.com/v1/stream",
  };
</script>

Real-time Updates

The live provider automatically subscribes to resource changes:

// Enable real-time mode
<Refine
  liveProvider={liveProvider}
  options={{
    liveMode: "auto", // or "manual"
  }}
/>

Events:

• created: New record created
• updated: Record updated
• deleted: Record deleted

Cleanup

Close all WebSocket connections on logout:

import { closeAllConnections } from "@framework-m/desk";

const handleLogout = async () => {
  closeAllConnections();
  await authProvider.logout();
};

Architecture

This package follows Framework M's architectural principles:

• No Global State: All context passed via props/hooks
• Type Safety: 100% TypeScript with strict mode
• Async Native: All I/O operations are async
• Clean Separation: Providers are independent and composable

Contributing

See CONTRIBUTING.md for development guidelines.

License

Apache-2.0