Registry / web-framework / dp-widgets-framework

dp-widgets-framework

library1.9.6jsnpmunverified

The `di-widgets-framework` is a React-based library for creating interactive, customizable widget dashboards with integrated drag-and-drop functionality. Currently at version 1.9.6, it offers components like `WidgetPalette` for widget selection and `WidgetSettingsPanel` for extensive configuration, including styling, behavior, and type-specific options. This framework differentiates itself through dynamic loading of widget types from a backend API, built-in search for widgets, and a comprehensive settings panel supporting various widget categories (e.g., search, filter, results, analytics, header, footer, text, agent). While no explicit release cadence is stated, the versioning indicates active maintenance and development. It ships with TypeScript types for enhanced developer experience.

web-framework crm-productivity

npm install dp-widgets-framework

github ↗package ↗

INSTALL

IMPORT

SIG · DP-WIDGETS-FRAMEWO

dp-widgets-framework

web-frameworkjavascriptv1.9.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WidgetPalette

✓ import { WidgetPalette } from 'di-widgets-framework';

✗ const WidgetPalette = require('di-widgets-framework').WidgetPalette;

The library uses named exports, primarily designed for ES Modules. CommonJS `require` syntax is not recommended and may lead to issues.

WidgetSettingsPanel

✓ import { WidgetSettingsPanel } from 'di-widgets-framework';

✗ import WidgetSettingsPanel from 'di-widgets-framework/WidgetSettingsPanel';

Components are exported as named exports from the main package entry point, not as default exports or from sub-paths.

Widget (Type)

✓ import type { Widget } from 'di-widgets-framework';

✗ import { Widget } from 'di-widgets-framework';

For TypeScript projects, it's best practice to use `import type` for interfaces and types to ensure they are stripped from the JavaScript output, avoiding accidental runtime imports.

This example demonstrates how to integrate `WidgetPalette` into a React application, showing a basic setup for a widget dashboard environment and highlighting the `widgetBackendUrl` prop.

import React from 'react'; import { WidgetPalette, WidgetDashboard } from 'di-widgets-framework'; function App() { // In a real application, you might fetch available widgets dynamically const availableWidgetTypes = [ { id: 'search', name: 'Search Input', description: 'Search input widget' }, { id: 'filter', name: 'Data Filter', description: 'Filter/facet widget' }, { id: 'results', name: 'Results Display', description: 'Results display widget' }, { id: 'analytics', name: 'Analytics Chart', description: 'Analytics/charts widget' }, ]; return ( <div style={{ display: 'flex', height: '100vh', padding: '20px' }}> <div style={{ width: '25%', paddingRight: '20px', borderRight: '1px solid #eee' }}> <h3>Widget Palette</h3> <WidgetPalette widgetBackendUrl="http://localhost:3001" // In a real app, you might pass availableWidgetTypes as a prop if not fetched by backend /> </div> <div style={{ flex: 1, paddingLeft: '20px' }}> <h3>Dashboard Area</h3> {/* WidgetDashboard component would be used here to render dropped widgets */} {/* Example: <WidgetDashboard backendUrl="http://localhost:3001" /> */} <p>Drag widgets from the palette onto this area.</p> </div> </div> ); } export default App;

Debug

Known issues

gotchaOmitting the `widgetBackendUrl` prop for components like `WidgetPalette` and `WidgetSettingsPanel` defaults to relative API calls. This can lead to unexpected '404 Not Found' errors or network failures in non-root deployments or server-side rendering (SSR) environments.

fix

Always explicitly define `widgetBackendUrl` (e.g., `http://localhost:3001` or `/api`) for robust and predictable API routing, especially in production or complex deployment scenarios.

affects: >=1.0.0

gotchaThe `WidgetSettingsPanel` component has critical required props: `pageId` (string) and `widget` (an object conforming to the `Widget` interface). Failure to provide valid values for these will result in runtime errors and prevent the panel from rendering or functioning correctly.

fix

Ensure that `pageId` is a non-empty string and `widget` is a valid object adhering to the `Widget` interface before attempting to render `WidgetSettingsPanel`.

affects: >=1.0.0

gotchaAs a React framework, `di-widgets-framework` depends on `react` and `react-dom` as peer dependencies. Incompatible versions (e.g., using an older React with a newer framework, or vice-versa) can lead to runtime issues such as 'Invalid hook call' errors.

fix

Verify that your project's `react` and `react-dom` versions are compatible with the framework's requirements (typically React 17 or 18+). Run `npm install` or `yarn install` to ensure peer dependencies are correctly resolved.

affects: >=1.1.0

gotchaWhile the library ships with TypeScript types, incorrect usage or misconfiguration of your `tsconfig.json` can lead to type errors during compilation. For example, importing types as values (e.g., `import { Widget } from '...'`) rather than using `import type`.

fix

For types and interfaces, always use `import type { TypeName } from 'package-name';` to prevent accidental runtime imports and ensure proper type stripping during compilation. Review your `tsconfig.json` for strictness and module resolution settings.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This typically occurs when a React component is imported incorrectly (e.g., trying to default import a named export, or using CommonJS `require` in an ESM context).

fix

Ensure all components are imported using named ES module syntax, like `import { ComponentName } from 'di-widgets-framework';`, and that your build setup supports ES Modules.

TypeError: Cannot read properties of undefined (reading 'title') (or similar property of a widget object)

A `Widget` object (or a nested property of it) expected by a component like `WidgetSettingsPanel` is `undefined` or `null`, often due to missing data or incorrect state management.

fix

Before rendering components that rely on complex objects, ensure the data (e.g., the `widget` prop) is valid and complete. Implement defensive coding with optional chaining (`?.`) or conditional rendering.

Failed to load resource: the server responded with a status of 404 (Not Found) - for widgetBackendUrl API calls

The backend API specified by `widgetBackendUrl` is inaccessible, the URL is incorrect, or the specific endpoint does not exist or is not configured correctly on the server.

fix

Verify the `widgetBackendUrl` value for typos and ensure your backend service is running and accessible at that exact URL. Confirm that the required API endpoints are correctly implemented and exposed.

Upgrade

Version history

1.9.6latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React-based UI framework.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

48 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/aretec-inc/di-widgets-framework ↗

packagehttps://www.npmjs.com/package/dp-widgets-framework ↗