ui-soxo-bootstrap-core 2.4.25-dev.8 → 2.4.25-dev.9

package/core/lib/elements/basic/rangepicker/rangepicker.js

@@ -1,46 +1,135 @@
-import { DatePicker } from 'antd';
+/**
+ * @file rangepicker.js
+ * @description A reusable, enhanced Ant Design RangePicker component.
+ *
+ * Features:
+ * - Manual selections require "Apply" button confirmation
+ * - Preset ranges apply immediately without confirmation
+ * - Optimized state management and event handling
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment-timezone';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import Button from '../button/button';
 import './rangepicker.scss';
 
+/**
+ * Enhanced RangePicker with Apply/Cancel controls for manual selections.
+ * @param {object} props
+ * @param {moment.Moment[]} props.value - Current applied date range
+ * @param {function(moment.Moment[]): void} props.onChange - Callback when range is applied
+ * @param {string} [props.format='DD/MM/YYYY'] - Date display format
+ * @param {object} [props.ranges] - Preset date ranges
+ * @param {boolean} [props.allowClear=false] - Whether to show clear button
+ * @param {boolean} [props.inputReadOnly=true] - Whether input is read-only
+ */
+
 const { RangePicker } = DatePicker;
 
-export default function RangePickerComponent({ onChange, value, ranges }) {
-  // value is still: [moment, moment]
-  const startDate = value[0];
-  const endDate = value[1];
+export default function RangePickerComponent({
+  value,
+  onChange,
+  format = 'DD/MM/YYYY',
+  ranges,
+  allowClear = false,
+  inputReadOnly = true,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+
+  // Temporary range during selection (before Apply is clicked)
+  const [tempRange, setTempRange] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Ref to track if a selection just happened, to prevent the picker from closing.
+  const selectionJustHappened = useRef(false);
 
-  function handleChange(dates) {
-    if (!dates) {
-      onChange(null);
+  /**
+   * Handles any completed date selection (both manual and preset).
+   * It updates the temporary range and sets a flag to keep the picker open.
+   */
+  const handleChange = useCallback((dates) => {
+    setTempRange(dates || []);
+    selectionJustHappened.current = true;
+  }, []);
+
+  /**
+   * Handles picker open/close events.
+   * Prevents closing after a selection, requiring user to click Apply/Cancel.
+   */
+  const handleOpenChange = useCallback((open) => {
+    // If the picker is trying to close, check if it was due to a selection.
+    if (!open && selectionJustHappened.current) {
+      // It was a selection, so ignore the close request and reset the flag.
+      selectionJustHappened.current = false;
       return;
     }
 
-    // Convert dayjs → moment so your external code does NOT break
-    const converted = [moment(dates[0].toDate()), moment(dates[1].toDate())];
+    // For all other cases (opening, or closing by clicking outside), proceed as normal.
+    if (open) {
+      // Reset temp range when opening for a fresh selection.
+      setTempRange(null);
+    }
+    setIsOpen(open);
+  }, []);
+
+  /**
+   * Applies the temporary range and closes picker
+   */
+  const handleApply = useCallback(() => {
+    if (tempRange?.length === 2 && onChange) {
+      onChange(tempRange);
+    }
+    selectionJustHappened.current = false; // Clear the flag
+    setIsOpen(false);
+  }, [tempRange, onChange]);
 
-    onChange(converted);
-  }
+  /**
+   * Cancels selection and closes picker
+   */
+  const handleCancel = useCallback(() => {
+    selectionJustHappened.current = false; // Clear the flag
+    setTempRange(null);
+    setIsOpen(false);
+  }, []);
 
-  // Convert your old "ranges" object into AntD presets array
-  const presets = Object.entries(ranges).map(([label, range]) => ({
-    label,
-    value: range,
-  }));
+  // Memoized preset ranges - use provided ranges or default set
+  const defaultRanges = useRef({
+    Today: [moment(), moment()],
+    Yesterday: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+    'This Week': [moment().startOf('week'), moment().endOf('week')],
+    'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
+    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+  }).current;
 
   return (
-    <div className="rangepicker">
-      <RangePicker
-        allowClear={false}
-        inputReadOnly
-        format="DD/MM/YYYY"
-        // moment → allowed
-        value={[startDate, endDate]}
-        onChange={handleChange}
-        presets={presets}
-        ranges={ranges}
-      />
-    </div>
+    <RangePicker
+      allowClear={allowClear}
+      inputReadOnly={inputReadOnly}
+      format={format}
+      value={tempRange || value}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      onChange={handleChange}
+      ranges={ranges !== undefined ? ranges : defaultRanges}
+      {...restProps}
+      renderExtraFooter={() => (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', order: 1 }}>
+          <Space>
+            <Button size="small" onClick={handleCancel}>
+              {t('Cancel')}
+            </Button>
+            <Button type="primary" size="small" onClick={handleApply}>
+              {t('Apply')}
+            </Button>
+          </Space>
+        </div>
+      )}
+    />
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.8",
+  "version": "2.4.25-dev.9",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"

package/README.md

@@ -1,260 +0,0 @@
-# 📦 NPM Release Workflow — Task-Based Development → Develop → Master
-
-This guide describes the complete workflow for publishing **task-based development builds** and **stable releases** using GitHub Actions, Git tags, and npm versioning.
-
-Incorrect versioning or incorrect tags will break the publish pipeline — follow the process exactly.
-
----
-
-# 📘 Table of Contents
-- Overview
-- Branch Strategy
-- Task Branch Workflow
-- Versioning Rules
-- Development Release Workflow (`develop`)
-- Promotion Workflow (Dev → Master)
-- Publishing via GitHub Release UI
-- How GitHub Action Detects Release Type
-- Summary Table
-- Common Mistakes & Fixes
-
----
-
-# 🧩 Overview
-
-We maintain two release channels:
-
-| Channel              | Branch   | Tag              | Purpose               |
-|---------------------|----------|------------------|-----------------------|
-| Stable (`latest`)   | master   | `vX.Y.Z`         | Production release    |
-| Development (`dev`) | develop  | `vX.Y.Z-dev.N`   | QA/internal testing   |
-
-Releases are triggered using Git tags:
-
-```
-npm version
-```
-
----
-
-# 🌿 Branch Strategy
-
-## `master`
-- Production-ready code  
-- Publishes **stable** builds  
-- Versions never include a `dev` suffix  
-
-## `develop`
-- Used for QA/internal testing  
-- Publishes **development** builds  
-- Versions always include `-dev.N`  
-
-## Task Branches
-- Create from `master`  
-- Naming: `task/<JIRA-ID>-<description>`  
-- After completing work, merge into `develop`  
-
----
-
-# 🏗️ Task Branch Workflow
-
-### 1. Create a task branch
-```bash
-git checkout master
-git pull origin master
-git checkout -b task/<JIRA-ID>-<description>
-```
-
-### 2. Work on the task
-```bash
-git add .
-git commit -m "TASK-123: Implement XYZ"
-```
-
-### 3. Merge into develop
-```bash
-git checkout develop
-git pull origin develop
-git merge task/<JIRA-ID>-<description>
-```
-
----
-
-# 🔧 Versioning Rules
-
-## Development Versions
-```
-X.Y.Z-dev.N
-```
-Example:
-```
-2.4.30-dev.0
-```
-
-## Stable Versions
-```
-X.Y.Z
-```
-
-## Rules
-- Each version must be unique  
-- Dev versions do **not** convert into stable versions  
-- Git tag must exactly match `package.json` version  
-
----
-
-# 🟦 Development Release Workflow (`develop`)
-
-### 1. Switch to develop
-```bash
-git checkout develop
-git pull origin develop
-```
-
-### 2. Create a new development version
-```bash
-npm version prerelease --preid=dev
-```
-
-### 3. Push commit + tag
-```bash
-git push --follow-tags
-```
-
-### 4. GitHub Action publishes dev build
-```
-npm publish --tag dev
-```
-
-### 5. Install the dev build
-```bash
-npm install soxo-bootstrap-core@dev
-```
-
----
-
-# 🟩 Promotion Workflow (Dev → Master)
-
-### 1. Switch to master
-```bash
-git checkout master
-git pull origin master
-```
-
-### 2. Merge develop into master
-```bash
-git merge develop
-```
-
-### 3. Bump the stable version
-```bash
-npm version patch
-# or
-npm version minor
-# or
-npm version major
-```
-
-### 4. Push with tags
-```bash
-git push --follow-tags
-```
-
-### 5. GitHub Action publishes stable build
-```
-npm publish
-```
-
-### 6. Install stable version
-```bash
-npm install soxo-bootstrap-core
-# or
-npm install soxo-bootstrap-core@<version>
-```
-
----
-
-# 🟧 Publishing via GitHub Release UI
-
-### Important
-**The tag must match the `package.json` version exactly**, including the `v` prefix.
-
-Example:
-```
-package.json: "version": "2.4.31-dev.0"
-GitHub Tag:  v2.4.31-dev.0
-```
-
----
-
-## Steps
-
-### 1. Ensure `develop` branch is up to date  
-Push your changes.
-
-### 2. Ensure version contains a dev suffix  
-If not:
-```bash
-npm version prerelease --preid=dev
-git push --follow-tags
-```
-
-### 3. Open GitHub → Releases → Draft a new release
-
-### 4. Create tag matching the version  
-Example:
-```
-v2.4.31-dev.0
-```
-
-### 5. Select target branch = `develop`
-
-### 6. Title = tag version  
-Description is optional.
-
-### 7. Publish the release  
-Triggers:
-```
-npm publish --tag dev
-```
-
----
-
-# ⚙️ How GitHub Action Detects Release Type
-
-If version contains `dev`:
-```
-npm publish --tag dev
-```
-
-Otherwise:
-```
-npm publish
-```
-
----
-
-# 📊 Summary Table
-
-| Step                     | Branch   | Command                                 | Tag              | Publish Type |
-|--------------------------|----------|------------------------------------------|------------------|--------------|
-| Create task branch       | master   | `git checkout -b task/<ID>`              | —                | —            |
-| Merge task → develop     | develop  | `git merge task/<ID>`                    | —                | —            |
-| Dev version              | develop  | `npm version prerelease --preid=dev`     | `vX.Y.Z-dev.N`   | dev          |
-| Publish dev build        | develop  | `git push --follow-tags`                 | —                | dev          |
-| Merge develop → master   | master   | `git merge develop`                      | —                | —            |
-| Stable version           | master   | `npm version patch/minor/major`          | `vX.Y.Z`         | latest       |
-| Publish stable build     | master   | `git push --follow-tags`                 | —                | latest       |
-
----
-
-# ⚠️ Common Mistakes & Fixes
-
-| Mistake                        | Issue                | Fix                             |
-|-------------------------------|----------------------|---------------------------------|
-| Tag doesn't match version     | Publish fails        | Always use `npm version`         |
-| Manual tag creation           | Version mismatch     | Avoid manual tagging             |
-| Dev publish from master       | Wrong channel        | Verify branch before tagging     |
-| Not pushing tags              | Workflow won’t run   | Use `git push --follow-tags`     |
-| Merging incomplete tasks      | Breaks dev builds    | Test before merging              |
-