{"id":10762,"library":"dp-widgets-framework","title":"React Widget Dashboard Framework","description":"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.","status":"active","version":"1.9.6","language":"javascript","source_language":"en","source_url":"https://github.com/aretec-inc/di-widgets-framework","tags":["javascript","react","widgets","dashboard","framework","drag-and-drop","customizable","typescript"],"install":[{"cmd":"npm install dp-widgets-framework","lang":"bash","label":"npm"},{"cmd":"yarn add dp-widgets-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add dp-widgets-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React-based UI framework.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The library uses named exports, primarily designed for ES Modules. CommonJS `require` syntax is not recommended and may lead to issues.","wrong":"const WidgetPalette = require('di-widgets-framework').WidgetPalette;","symbol":"WidgetPalette","correct":"import { WidgetPalette } from 'di-widgets-framework';"},{"note":"Components are exported as named exports from the main package entry point, not as default exports or from sub-paths.","wrong":"import WidgetSettingsPanel from 'di-widgets-framework/WidgetSettingsPanel';","symbol":"WidgetSettingsPanel","correct":"import { WidgetSettingsPanel } from 'di-widgets-framework';"},{"note":"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.","wrong":"import { Widget } from 'di-widgets-framework';","symbol":"Widget (Type)","correct":"import type { Widget } from 'di-widgets-framework';"}],"quickstart":{"code":"import React from 'react';\nimport { WidgetPalette, WidgetDashboard } from 'di-widgets-framework';\n\nfunction App() {\n  // In a real application, you might fetch available widgets dynamically\n  const availableWidgetTypes = [\n    { id: 'search', name: 'Search Input', description: 'Search input widget' },\n    { id: 'filter', name: 'Data Filter', description: 'Filter/facet widget' },\n    { id: 'results', name: 'Results Display', description: 'Results display widget' },\n    { id: 'analytics', name: 'Analytics Chart', description: 'Analytics/charts widget' },\n  ];\n\n  return (\n    <div style={{ display: 'flex', height: '100vh', padding: '20px' }}>\n      <div style={{ width: '25%', paddingRight: '20px', borderRight: '1px solid #eee' }}>\n        <h3>Widget Palette</h3>\n        <WidgetPalette \n          widgetBackendUrl=\"http://localhost:3001\" \n          // In a real app, you might pass availableWidgetTypes as a prop if not fetched by backend\n        />\n      </div>\n      <div style={{ flex: 1, paddingLeft: '20px' }}>\n        <h3>Dashboard Area</h3>\n        {/* WidgetDashboard component would be used here to render dropped widgets */}\n        {/* Example: <WidgetDashboard backendUrl=\"http://localhost:3001\" /> */}\n        <p>Drag widgets from the palette onto this area.</p>\n      </div>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Omitting 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"As 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.","severity":"gotcha","affected_versions":">=1.1.0"},{"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.","message":"While 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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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).","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'title') (or similar property of a widget object)"},{"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.","cause":"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.","error":"Failed to load resource: the server responded with a status of 404 (Not Found) - for widgetBackendUrl API calls"}],"ecosystem":"npm"}