v1.2.5

v1.2.5 - Default Animations for Enhanced User Experience 🎉

Release Date: 24th November 2024

This release introduces default entry and exit animations for Chipster components, providing a smoother and more visually engaging user experience. The new animations improve usability and feedback during interactions with chips, and they're fully backward-compatible.

Key Highlights

🎨 Frontend Enhancements:

• Animations Added:
  • Chips now fade and slide in/out during addition and removal using react-transition-group.
  • Customizable animation timings through the new animationDuration prop.
• Styling Updates:
  • New CSS animations added in chipsterAnimations.module.css.
  • Improved dark mode styles for better visibility of highlighted chips.
• Component Refactor:
  • Simplified ChipsterItem for easier animation integration.
  • Optimized ChipsterItemList with dynamic node management.

📖 Documentation Updates:

• Updated examples in docs/pages/start.mdx with animation configuration details.
• Added demo links showcasing animations.

File Changes

• Total Changes: 492 additions, 381 deletions across 32 files.
• Key File Updates:
  • chipsterAnimations.module.css - New animation styles.
  • ChipsterItemList.tsx - Refactored for animation handling.
  • helpers.ts - Added for testing utilities.

Additional Notes

• Backward Compatibility: Animations are non-breaking and optional.
• Performance: Lightweight implementation with minimal overhead.
• Future Direction: Plans for user-configurable animation presets.

---

v1.2.4

v1.2.4 - Custom Joiner Prop for Flexible Input Handling ✨

Release Date: 10 November 2024

This version adds a new joiner prop to the Chipster component, making it easier to add multiple items quickly using customizable keys. Whether you prefer Enter, comma, or other specific characters, the joiner prop enhances input flexibility.

Key Highlights

🎯 Frontend Features:

• New joiner Prop:
  • Supports single or multiple characters (e.g., comma, Enter, etc.).
  • Automatically trims whitespace and validates non-empty values.
• Improved Input Behavior:
  • Clears input upon successfully adding an item.
  • Enhances keyboard navigation and error handling.

🚀 Performance Enhancements:

• Efficient handling of custom key joins.
• Simplified validation for cleaner input entries.

🧪 Testing Updates:

• Expanded test coverage for the joiner functionality.
• Validated adding items with multiple key options (e.g., comma, Enter).

File Changes

• Total Changes: 1,085 additions, 112 deletions.
• Key File Updates:
  • Chipster.tsx - Introduced joiner prop in component props.
  • ChipsterHook.tsx - Updated logic for handling joiner.
  • ChipsterInput.tsx - Enhanced keyboard event handling.

Additional Notes

• Improved Accessibility: Focused on better keyboard interaction.
• Backward Compatibility: Existing functionality remains unaffected.

---

Chipster v1.2.0

Release Date: 06 November, 2024

Chipster v1.2.0 introduces a modular architecture with composable components, enhancing flexibility and customization for multi-entry input handling in React. This release also brings improved keyboard navigation, enhanced accessibility, and a transition to Playwright for end-to-end testing, offering a more robust development and testing experience.

---

🚀 Key Updates

Modular & Composable Architecture

• Modular Components:
  • New subcomponents like ChipsterInput, ChipsterItemList, ChipsterValidation, etc., support highly flexible and customizable configurations.
  • Introduced a centralized ChipsterContext to manage shared state and validation across components.
• Centralized State Management:
  • Context-based state management unifies component states across Chipster, improving reusability.

Enhanced Multi-Entry Input Handling

• Improved Input Validation:
  • Enhanced validation rules, including maximum item limits, duplicate checks, and transformation options.
• Keyboard Navigation:
  • Full keyboard navigation, including Arrow keys for navigating chips and suggestions, Backspace for deletions, and Enter for selection.
• Dark Mode & Styling Customization:
  • Added dark mode support.
  • New props for custom class names on chips, input fields, and suggestions allow flexible styling.

New Testing Framework: Playwright

• Transition from Jest to Playwright:
  • Playwright now handles all end-to-end testing, with added cross-browser compatibility.
  • Added extensive E2E tests for item management, validation rules, suggestions, and component styling.
  • New scripts in package.json for E2E testing:
    • test:e2e - Standard end-to-end testing.
    • test:e2e:debug - Debug mode for tests.

---

📝 Installation

install Chipster v1.2.0:

npm install @micoblanc/[email protected]