webFUSE.org: Comprehensive React component library

webFUSE is one of my personal projects, designed and developed as a modular React component library designed to accelerate development with a rich set of UI components, hooks, and utilities. It is structured for easy integration, documentation, and contribution, supporting modern workflows and best practices.. It is currently distributed as a private npm package (see npm), and used in several of my own and client projects.

The library includes:

• Component Library: A wide range of reusable React components built with Material-UI.
• Hooks & Utilities: Custom hooks and utility functions for common tasks.
• TypeScript Support: Written in TypeScript for type safety and developer experience.
• Documentation: JSDoc-based documentation with custom tags for components, hooks, utils, and typedefs.
• Testing & Linting: Integrated with TSDX for streamlined development, testing, and linting.
• Size-Limited: Uses size-limit to ensure the library remains lightweight.
• Firebase Integration: Includes configuration for Firebase and emulator support in the docs subproject.

webFUSE Features & Structure

Tools

• Agile Poker

Components

General

• Bar
• Spinner
• DragDropZone
• AudioPlayer
• ImageTagger
• ReactHookFormSelect
• Status
• TimeControl
• TimeTracker
• ShipmentTracker
• ClickableRichTooltip

Layout

• Lightbox
• ScreenSaver
• TabPanel
• TabbedImageLayout

Table

• StaticTable
• MTableRowDimensions
• Table
• ImageEditComponent
• InvoiceTable

Containers

• ImageTaggerContainer
• TabbedImageTaggerContainer
• ShipmentTrackerContainer
• TableContainer

Types

• A11yTabProps
• ImageTaggerCategory
• ImageTaggerPoint
• TableOptions
• Column
• Calculation
• UseTimerSettings
• UseTimerReturn
• UseStopwatchSettings
• UseStopwatchReturn
• UseTimeSettings
• UseTimeReturn
• TimeControlOptions
• TimeTrackerButtonMenuItem
• TimeTrackerSelectMenuItem
• TabbedImageLayoutTab
• ShipmentTrackerStatus
• ShipmentTrackerStatusUpdate
• InvoiceTableOptions
• InvoiceTableColumnOptions
• InvoiceTableRowOptions
• InvoiceTableTypeColumnOptions
• InvoiceTableStatusColumnOptions
• InvoiceTableExtraColumn
• SelectOption

Hooks

• useSize
• useInterval
• useTimer
• useStopwatch
• useTime
• usePrevious

Utils

• getContrastTextColor
• getInitials
• getRandomColor
• a11yTabProps

If you are interested in learning more or want to see examples, check out the documentation at webfuse.org.