Vue Cal is a full-featured Vue 3 calendar component library with zero external dependencies beyond Vue itself. It provides multiple views (day, week, month, year, years), event management (create, edit, delete, drag-and-drop, resize), schedules, special hours, extensive localization (50+ languages), dark/light theme via CSS variables, and comprehensive slot-based customization. The library is built entirely with the Composition API and is structured around core composables: `useVueCal` (main state), `useConfig` (prop parsing, locale loading), `useEvents` (event normalization, indexing, overlap detection), `useView` (navigation, cell generation), and `useDragAndDrop` (native HTML5 DnD with cross-instance support). The primary entry point is `src/vue-cal/index.js`, which exports the `VueCal` component, `useLocale` function, and a set of optional Date prototype extensions. Events are passed as an array of objects and reactively rendered; all interactions emit Vue events enriched with context (cell info, cursor position). The library is in active pre-release (v5.0.1-rc.46) with a stable release pending timezone support.
This repository is a Gatsby-based static web application that generates HTML snippets of technology icons for GitHub profile READMEs. It provides a user interface where users can search from a large collection of technology icons (extracted from a README table), select and reorder them via drag-and-drop (using @dnd-kit), configure output options (e.g., wrapping in <code>, <div>, table format, icon size), and produce a ready-to-copy HTML string. The application is single-page with no backend; it fetches icon metadata dynamically from the repo's own README.md on GitHub. The architecture is a typical React component tree with state management in the Generator class component, using Material-UI for design and CodeMirror for code display. The codebase is well-structured, dependencies are modern, and the deployment is automated via GitHub Actions to GitHub Pages. It solves a specific, common need for developers seeking an aesthetic way to showcase their tech stack.
This repository implements a Home Assistant custom integration that adds a visual, drag-and-drop card builder for Lovelace dashboards. Users can design custom dashboard cards by composing blocks (text, icons, gauges, charts, weather, etc.) in a canvas, configuring styles, entity bindings, and actions—all without writing YAML or code. The system includes a dedicated panel within Home Assistant, a custom Lovelace card renderer (`custom:card-builder-renderer-card`) for runtime display, and a marketplace for sharing cards via cardbuilder.pro. Architecturally, the project is split into a Python backend (`custom_components/card_builder/`) and a TypeScript/Lit frontend (`frontend/`). The backend handles integration setup, WebSocket APIs for CRUD on cards, presets, media, and account management. The frontend is a single-page application with panel views (dashboard, card list, editor), a designer canvas with Moveable-based manipulation, and a block system where each block declares its configuration, editor UI, and rendering logic. Key subsystems include a style resolver with preset inheritance and entity bindings (direct, map, threshold, condition, template), a drag-and-drop manager with adapters for canvas and containers, a chart data provider for history/statistics, and a document model with versioned migration. The codebase demonstrates high craftsmanship in its block abstraction, style system, and binding engine—patterns that could be extracted for other visual editors. However, some files are large and tightly coupled, with lingering FIXME comments and a few fragile DOM workarounds. The integration is actively maintained, with a clear roadmap and pro version planned, though the external marketplace dependency introduces some risk.
ng2-file-upload is an Angular library providing drag-and-drop and file selection directives for file upload. It consists of two directives (ng2FileSelect and ng2FileDrop) and a core FileUploader class that manages a queue of FileItems, handles XHR uploads with multipart or streaming (disableMultipart), and offers filter-based validation (file size, mime type, file type, queue limit). The demo application showcases standard usage with a remote API. The library is actively maintained with support for Angular 21, but its code style predates modern standalone components and uses legacy Angular patterns (non-standalone directives, manual DI via inject()). Tooling uses Nx 22, Jest, and ng-packagr. While functional and battle-tested (1899 stars), the codebase shows medium technical drift due to reliance on deprecated Angular patterns and a monolithic FileUploader class.
LobsterBoard is a self-hosted, drag-and-drop dashboard builder implemented as a monolithic Node.js server with a vanilla JavaScript frontend. It provides real-time system monitoring via SSE, 50+ configurable widgets (weather, finance, AI usage, system stats, etc.), a template gallery, custom pages with server-side APIs, and remote server management with ECDH-encrypted polling. The server handles authentication (password/PIN/public mode), secrets management, proxy with SSRF protection, and AI provider integrations. The frontend consists of modular editor components (canvas, drag-drop, properties, export) and a widget library using a simple generateHtml/generateJs pattern. The architecture is straightforward but lacks modern framework abstractions, has some code duplication between source and legacy files, and uses eval for widget JS generation, posing potential security risks. The project is actively maintained (recent commits, CHANGELOG) but shows signs of technical drift: dated JavaScript patterns (var, IIFEs), manual DOM manipulation, and a BSL license that restricts commercial use.
The Kalendar repository is a Vue 2 plugin that provides a flexible calendar component for managing events. It features week and day views, drag-and-drop event creation, customizable slots for event rendering, and configuration options for appearance and behavior. The component leverages web workers to offload heavy computations (such as generating time slots and constructing events) to maintain UI responsiveness. The architecture follows a modular Vue component structure, with the main container managing state and child components handling specific UI elements (days, cells, events). It uses Vue's provide/inject pattern to pass down configuration and event data, and employs scoped slots for deep customization of event cards. The core library is framework-specific to Vue 2 but isolates concerns like date utilities and worker communication into reusable utilities. Despite its solid foundation, the repository shows signs of technical drift due to its reliance on Vue 2 and outdated build tools (Vue CLI 4, Rollup 1.x, Sass-loader 8.x). The last commit date appears to be in the future (2026-01-21), suggesting a lack of recent maintenance activity, and the project does not include automated tests. However, the utility functions and worker promise wrappers demonstrate reusable, non-obvious patterns that could be extracted for use in other projects.
react-sortable-tree is a React component library that provides a drag-and-drop sortable tree view for hierarchical data. It renders nested arrays of nodes with expand/collapse, virtualization via react-virtualized, search with highlighting, theming, and extensive callback hooks for move and visibility changes. The library is not actively maintained; the last release was in 2020, and the README explicitly disclaims maintenance. The codebase is well-architected with clean separation of concerns: pure tree-data utility functions (walk, map, insertNode, etc.) separated from React rendering, a DndManager class that wraps react-dnd, and a theming system. Despite its staleness, the core tree manipulation algorithms are high-quality and extractable for other projects. The library depends on outdated versions of React (16) and react-dnd (11), and uses react-virtualized instead of the more modern react-window.