feat: Add 5 new enterprise components (SignaturePad, KanbanBoard, Ste…

[shivambarkule]

Description

This PR adds 5 new enterprise-focused components to the frappe-ui-react library that are essential for building comprehensive ERP (Enterprise Resource Planning) applications. These components address common business workflow requirements and enhance the developer experience when building Frappe-based applications.

Components Added:

1. SignaturePad - Digital signature capture component for document approvals and compliance
2. KanbanBoard - Task and workflow management board for sales pipelines, project management, and process tracking
3. Stepper/Wizard - Multi-step form wizard for complex data entry, onboarding, and configuration
4. DataTable - Advanced data table with sorting, pagination, row selection, and inline edit/delete operations
5. Timeline/ActivityFeed - Activity tracking and audit logs for document history and system events

ERP Use Cases:

• SignaturePad: Document approval workflows (purchase orders, invoices, contracts), HR management (employee onboarding, policy acknowledgments), financial transaction authorizations, and compliance requirements
• KanbanBoard: Sales pipeline management, purchase order workflows, project task tracking, support ticket management, and manufacturing process tracking
• Stepper/Wizard: Employee onboarding, vendor/customer registration, complex form data entry (invoices, POs), system configuration wizards, and multi-stage approval processes
• DataTable: Master data management (customers, vendors, items, employees), transaction lists (invoices, purchase orders, journal entries), reports and analytics, inventory management, and financial records
• Timeline/ActivityFeed: Audit trails for record changes, document lifecycle tracking, communication logs, project activity monitoring, transaction history, and system event logging

Relevant Technical Choices

• All components follow existing frappe-ui-react patterns and conventions
• Full TypeScript support with comprehensive type definitions
• Storybook stories with interactive controls matching existing component documentation style
• Performance optimizations using React.useMemo to prevent unnecessary re-renders (fixed Stepper hanging issue)
• Proper component exports in main index.ts
• All components use existing Tailwind classes and Frappe design system
• Consistent file structure: componentName.tsx, types.ts, index.ts, componentName.stories.tsx
• Accessible and keyboard navigable components

Technical Implementation Details:

• SignaturePad: Canvas-based implementation with mouse and touch support, export to data URL/Blob
• KanbanBoard: HTML5 drag-and-drop API with state management for card movement
• Stepper/Wizard: Step validation support, controlled/uncontrolled modes, custom step rendering
• DataTable: Virtual scrolling ready, column-based sorting, server-side pagination support
• Timeline: Flexible rendering with custom icons, multiple color themes, horizontal/vertical orientations

Testing Instructions

Manual Testing via Storybook:

1. Run Storybook:

   npm run storybook

2. SignaturePad Testing:

   • Navigate to Components → SignaturePad
   • Test drawing on canvas with mouse and touch events
   • Verify clear button functionality
   • Test download button (when enabled)
   • Verify onChange callback fires on signature changes
   • Test disabled state

3. KanbanBoard Testing:

   • Navigate to Components → KanbanBoard
   • Test drag and drop functionality between columns
   • Verify onCardMove callback fires with correct parameters
   • Test add card functionality (when enabled)
   • Verify custom card and header rendering
   • Test disabled column state

4. Stepper/Wizard Testing:

   • Navigate to Components → Stepper
   • Test step navigation by clicking on steps
   • Test Wizard component with multi-step form example
   • Verify step validation at each stage
   • Test previous/next button functionality
   • Verify different variants (default, dots, numbers)
   • Test horizontal and vertical orientations

5. DataTable Testing:

   • Navigate to Components → DataTable
   • Test column sorting by clicking column headers (asc → desc → none)
   • Test row selection with checkbox (when selectable enabled)
   • Test edit/delete actions (when showActions enabled)
   • Verify pagination controls (when enabled)
   • Test empty state display
   • Verify loading state

6. Timeline/ActivityFeed Testing:

   • Navigate to Components → Timeline
   • Test vertical and horizontal orientations
   • Verify timestamp formatting (relative time, dates)
   • Test ActivityFeed with load more functionality
   • Verify custom icon rendering
   • Test different color themes
   • Verify compact and detailed variants

Automated Testing:

# Run unit tests
npm run test:unit

# Type checking
npm run lint:types

# Linting
npm run lint:js

# Build verification
npm run build

Build Verification:

All components build successfully with no TypeScript errors. The build process includes:

• TypeScript compilation
• Asset copying (CSS, SVG files)
• Export generation

Additional Information:

Files Changed:

• 23 new files added (components, types, stories, index files)
• 1 file modified (packages/frappe-ui-react/src/components/index.ts for exports)

Component Structure:
Each component follows the standard frappe-ui-react structure:

componentName/
  ├── componentName.tsx      # Main component implementation
  ├── types.ts               # TypeScript type definitions
  ├── index.ts               # Component exports
  └── componentName.stories.tsx  # Storybook stories with controls

Design System Compliance:

• Uses existing Tailwind utility classes from Frappe UI
• Follows Frappe UI color scheme (blue, green, red, gray themes)
• Consistent spacing and sizing with existing components
• Matches existing component patterns (Button, Dialog, etc.)

Performance Optimizations:

• Fixed Stepper component hanging issue using React.useMemo for stepperSteps calculation
• Optimized Wizard component to prevent infinite re-render loops
• Efficient data handling in DataTable with memoized sorting and pagination

Accessibility:

• Keyboard navigation support
• ARIA labels where appropriate
• Focus management in interactive components
• Screen reader friendly

Screenshot/Screencast

All components are available in Storybook with interactive examples. To view:

npm run storybook

Then navigate to:

• Components → SignaturePad (with various configurations)

• Components → KanbanBoard (with drag-and-drop demo)

• Components → Stepper (with Wizard multi-step form example)

• Components → DataTable (with sorting, pagination, and actions)

• Components → Timeline (with different orientations and variants)

Each story includes interactive controls matching the existing component documentation style (similar to Tree component).

Checklist

• I have thoroughly tested this code to the best of my abilities.
• I have reviewed the code myself before requesting a review.
• This code is covered by unit tests to verify that it works as intended.
• The QA of this PR is done by a member of the QA team (to be checked by QA).

Fixes #

[b1ink0]

@shivambarkule Welcome to frappe-ui-react, and thank you for showing your interest in contributing!

It would be great if you could update the PR description with the required format and include more details about all the components you’ve added.

We’d also like to understand where and how these components would be used in the context of ERP.

[shivambarkule]

Hey , I have updated it. You can check it now. Also the use cases are mentioned there. Some may feel like non-necessary but maybe be needed in future when new features might be implemented.

…

On Fri, Jan 9, 2026 at 7:05 PM Aditya Dhade ***@***.***> wrote: *b1ink0* left a comment (rtCamp/frappe-ui-react#110) <#110 (comment)> @shivambarkule <https://github.com/shivambarkule> Welcome to frappe-ui-react, and thank you for showing your interest in contributing! It would be great if you could update the PR description with the required format <https://github.com/rtCamp/frappe-ui-react/blob/main/.github/PULL_REQUEST_TEMPLATE.md> and include more details about all the components you’ve added. We’d also like to understand where and how these components would be used in the context of ERP. — Reply to this email directly, view it on GitHub <#110 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BKW7FANMB3O5I4FJFOLWQHD4F6VAVAVCNFSM6AAAAACRFUAHVKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTOMRYHEZTONBSGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[b1ink0]

@shivambarkule Thank you for updating the PR description with details. It would also be great if you could add screenshots or a screencast showing each components in action with their options. This would help the team evaluate how these components could be used in the context of ERP.

[shivambarkule]

Hey @b1ink0 As requested, all the screenshots of the Components are pasted in the comment. Hope it will work. Some components may not be relevant in ERP context but might be used somewhere else in future.